flowbite-svelte 0.44.11 → 0.44.13

package/src/routes/docs/forms/radio.md

@@ -1,303 +0,0 @@
----
-layout: componentLayout
-title: Svelte Radio - Flowbite
-breadcrumb_title: Svelte Radio
-component_title: Radio
-dir: Forms
-description: Get started with the radio component to let the user choose a single option from multiple options in the form of a circle based on multiple styles and colors
-thumnailSize: w-72
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
-  import { Badge, A } from '$lib'
-
-  const components = 'Radio, Label, Helper'
-</script>
-
-The radio component can be used to allow the user to choose a single option from one or more available options coded with the utility classes from Tailwind CSS and available in multiple styles, variants, and colors and support dark mode.
-
-## Setup
-
-```svelte example hideOutput
-<script>
-  import { Radio } from 'flowbite-svelte';
-</script>
-```
-
-## Radio examples
-
-Use the default example of a radio component with the checked and unchecked state.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import { Radio } from 'flowbite-svelte';
-</script>
-
-<Radio name="example">Default radio</Radio>
-<Radio name="example">Checked state</Radio>
-```
-
-## Disabled state
-
-Apply the `disabled` attribute to the radio component to disallow the selection for the user.
-
-This example can be used for the disabled state of the radio component by applying the disabled attribute to the input element.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import { Radio } from 'flowbite-svelte';
-</script>
-
-<Radio name="disabled-state" disabled>Disabled radio</Radio>
-<Radio name="disabled-state" disabled>Disabled checked</Radio>
-```
-
-## Alternative syntax
-
-If you need separate control over the label and the radio you can use the verbose syntax, but then you need to take care about aligning manually.
-
-```svelte example class="flex flex-col gap-4"
-<script>
-  import { Radio, Table, TableHead, TableHeadCell, TableBody, TableBodyCell, TableBodyRow, Label } from 'flowbite-svelte';
-</script>
-
-<Table>
-  <TableHead>
-    <TableHeadCell>Left column</TableHeadCell>
-    <TableHeadCell>Right column</TableHeadCell>
-  </TableHead>
-  <TableBody class="divide-y dark:divide-gray-700">
-    <TableBodyRow class="divide-x dark:divide-gray-700">
-      <TableBodyCell><Label for="radio1">Default radio</Label></TableBodyCell>
-      <TableBodyCell><Label for="radio2">Disabled radio</Label></TableBodyCell>
-    </TableBodyRow>
-    <TableBodyRow class="divide-x dark:divide-gray-700">
-      <TableBodyCell><Radio name="separate" id="radio1" /></TableBodyCell>
-      <TableBodyCell><Radio name="separate" id="radio2" disabled /></TableBodyCell>
-    </TableBodyRow>
-  </TableBody>
-</Table>
-
-<Label color="red" class="mt-4 flex items-center font-bold italic">
-  Label on the other side <Radio name="separate" class="ml-2" />
-</Label>
-```
-
-## Radio with a link
-
-Use this example if you want to add an anchor link inside the label of the radio component.
-
-```svelte example hideScript
-<script>
-  import { Radio } from 'flowbite-svelte';
-</script>
-
-<Radio name="with-link">
-  I agree with the <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline ml-1"> terms and conditions </a>
-  .
-</Radio>
-```
-
-## Helper text
-
-Get started with this example if you want to add a secondary helper text for the radio component.
-
-```svelte example
-<script>
-  import { Radio, Helper } from 'flowbite-svelte';
-</script>
-
-<Radio aria-describedby="helper-checkbox-text">Free shipping via Flowbite</Radio>
-<Helper id="helper-checkbox-text" class="pl-6">For orders shipped from $25 in books or $29 in other categories</Helper>
-```
-
-## Bordered
-
-Use this example of a radio inside a card element to enable a larger area of clicking activation.
-
-```svelte example hideScript
-<script>
-  import { Radio } from 'flowbite-svelte';
-</script>
-
-<div class="grid grid-cols-2 gap-6">
-  <div class="rounded border border-gray-200 dark:border-gray-700">
-    <Radio name="bordered" class="w-full p-4">Default radio</Radio>
-  </div>
-  <div class="rounded border border-gray-200 dark:border-gray-700">
-    <Radio name="bordered" class="w-full p-4">Checked state</Radio>
-  </div>
-</div>
-```
-
-## Radio list group
-
-Use this example to show a list of radio items grouped inside a card.
-
-```svelte example
-<script>
-  import { Radio } from 'flowbite-svelte';
-  let technology = 'svelte';
-</script>
-
-<p class="mb-4 font-semibold text-gray-900 dark:text-white">
-  Technology <span class="capitalize">{technology}</span>
-</p>
-<ul class="w-48 bg-white rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-600 divide-y divide-gray-200 dark:divide-gray-600">
-  <li><Radio class="p-3" bind:group={technology} value="svelte">Svelte</Radio></li>
-  <li><Radio class="p-3" bind:group={technology} value="vue js">Vue JS</Radio></li>
-  <li><Radio class="p-3" bind:group={technology} value="react">React</Radio></li>
-  <li><Radio class="p-3" bind:group={technology} value="angular">Angular</Radio></li>
-</ul>
-```
-
-## Horizontal list group
-
-Use this example to show a list of radio items inside a card horizontally.
-
-```svelte example hideScript
-<script>
-  import { Radio } from 'flowbite-svelte';
-</script>
-
-<p class="mb-4 font-semibold text-gray-900 dark:text-white">Identification</p>
-<ul class="items-center w-full rounded-lg border border-gray-200 sm:flex dark:bg-gray-800 dark:border-gray-600 divide-x divide-gray-200 dark:divide-gray-600">
-  <li class="w-full"><Radio name="hor-list" class="p-3">Svelte</Radio></li>
-  <li class="w-full"><Radio name="hor-list" class="p-3">Vue JS</Radio></li>
-  <li class="w-full"><Radio name="hor-list" class="p-3">React</Radio></li>
-  <li class="w-full"><Radio name="hor-list" class="p-3">Angular</Radio></li>
-</ul>
-```
-
-## Radio in dropdown
-
-Here’s an example of a list group that you can use right away.
-
-```svelte example class="flex justify-center items-start h-80"
-<script>
-  import { Radio, Dropdown, Button, Helper } from 'flowbite-svelte';
-  import { ChevronDownSolid } from 'flowbite-svelte-icons';
-  let group3 = 2;
-</script>
-
-<Button>Dropdown radio<ChevronDownSolid class="w-3 h-3 ml-2 text-white dark:text-white" /></Button>
-<Dropdown class="w-60">
-  <ul class="p-2">
-    <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
-      <Radio name="group3" bind:group={group3} value={1}>Enable notifications</Radio>
-      <Helper class="pl-6">Some helpful instruction goes over here.</Helper>
-    </li>
-    <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
-      <Radio name="group3" bind:group={group3} value={2}>Enable 2FA auth</Radio>
-      <Helper class="pl-6">Some helpful instruction goes over here.</Helper>
-    </li>
-    <li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
-      <Radio name="group3" bind:group={group3} value={3}>Subscribe newsletter</Radio>
-      <Helper class="pl-6">Some helpful instruction goes over here.</Helper>
-    </li>
-  </ul>
-</Dropdown>
-```
-
-## Inline layout
-
-You can align the radio elements horizontally by using a wrapper tag and applying the flex class.
-
-```svelte example
-<script>
-  import { Radio } from 'flowbite-svelte';
-  let inline1 = 'second';
-</script>
-
-<div class="flex gap-3">
-  <Radio group={inline1} value="first">Inline 1</Radio>
-  <Radio group={inline1} value="second">Inline 2 checked</Radio>
-  <Radio group={inline1} value="third">Inline 3</Radio>
-  <Radio group={inline1} value="fourth" disabled>Inline disabled</Radio>
-</div>
-```
-
-You can use the property `inline` as the alternative.
-
-```svelte example
-<script>
-  import { Radio } from 'flowbite-svelte';
-  let inline2 = 'third';
-</script>
-
-<Radio group={inline2} inline value="first" class="mr-2">Inline 1</Radio>
-<Radio group={inline2} inline value="second" class="mr-2">Inline 2</Radio>
-<Radio group={inline2} inline value="third" class="mr-2">Inline checked</Radio>
-<Radio group={inline2} inline value="fourth" class="mr-2" disabled>Inline disabled</Radio>
-```
-
-## Colors
-
-```svelte example
-<script>
-  import { Radio } from 'flowbite-svelte';
-  let colors;
-</script>
-
-<p class="mb-4 font-semibold {colors}">Select color</p>
-<div class="flex gap-4">
-  <Radio bind:group={colors} color="red" value="text-red-500">Red</Radio>
-  <Radio bind:group={colors} color="green" value="text-green-500">Green</Radio>
-  <Radio bind:group={colors} color="purple" value="text-purple-500">Purple</Radio>
-  <Radio bind:group={colors} color="teal" value="text-teal-500">Teal</Radio>
-  <Radio bind:group={colors} color="yellow" value="text-yellow-500">Yellow</Radio>
-  <Radio bind:group={colors} color="orange" value="text-orange-500">Orange</Radio>
-</div>
-```
-
-## Advanced layout
-
-Use this example of an advanced layout of radio elements where the label parent element can be styled when the radio is checked.
-
-```svelte example
-<script>
-  import { Radio } from 'flowbite-svelte';
-  import { ArrowRightOutline } from 'flowbite-svelte-icons';
-</script>
-
-<p class="mb-5 text-lg font-medium text-gray-900 dark:text-white">Choose technology:</p>
-<div class="grid gap-6 w-full md:grid-cols-2">
-  <Radio name="custom" custom>
-    <div class="inline-flex justify-between items-center p-5 w-full text-gray-500 bg-white rounded-lg border border-gray-200 cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-primary-500 peer-checked:border-primary-600 peer-checked:text-primary-600 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
-      <div>
-        <div class="w-full text-lg font-semibold">0-50 MB</div>
-        <div class="w-full">Good for small websites</div>
-      </div>
-      <ArrowRightOutline class="ml-3 w-6 h-6" />
-    </div>
-  </Radio>
-  <Radio name="custom" custom>
-    <div for="hosting-big" class="inline-flex justify-between items-center p-5 w-full text-gray-500 bg-white rounded-lg border border-gray-200 cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-primary-500 peer-checked:border-primary-600 peer-checked:text-primary-600 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
-      <div class="block">
-        <div class="w-full text-lg font-semibold">500-1000 MB</div>
-        <div class="w-full">Good for large websites</div>
-      </div>
-      <ArrowRightOutline class="ml-3 w-6 h-6" />
-    </div>
-  </Radio>
-</div>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### Radio styling
-
-- Use the `class` prop to overwrite the `label` and `input` tag class.
-
-### Helper styling
-
-- Use the `class` prop to overwrite the `p` tag class.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Radio](https://flowbite.com/docs/forms/radio/)

package/src/routes/docs/forms/range.md

@@ -1,110 +0,0 @@
----
-layout: componentLayout
-title: Svelte Range Slider - Flowbite
-breadcrumb_title: Svelte Range Slider
-component_title: Range
-dir: Forms
-description: Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
-  import { Badge, A } from '$lib'
-  const components = 'Range'
-  let minmaxValue=5
-</script>
-
-The range component can be used as an input field to get a number from the user based on your custom selection (ie. from 1 to 100) by using a sliding animation.
-
-## Setup
-
-```svelte example hideOutput
-<script>
-  import { Range } from 'flowbite-svelte';
-</script>
-```
-
-## Range slider example
-
-```svelte example
-<script>
-  import { Range, Label } from 'flowbite-svelte';
-</script>
-
-<Label>Default range</Label>
-<Range id="range1" />
-```
-
-## Disabled state
-
-```svelte example
-<script>
-  import { Range, Label } from 'flowbite-svelte';
-</script>
-
-<Label>Default range</Label>
-<Range id="range-disabled" disabled />
-```
-
-## Binding value
-
-Use bind:value to bind the range input value as seen the the following examples.
-
-## Min and max
-
-```svelte example
-<script>
-  import { Range, Label } from 'flowbite-svelte';
-  let minmaxValue = 5;
-</script>
-
-<Label>Min-max range</Label>
-<Range id="range-minmax" min="0" max="10" bind:value={minmaxValue} />
-<p>Value: {minmaxValue}</p>
-```
-
-## Steps
-
-```svelte example
-<script>
-  import { Range, Label } from 'flowbite-svelte';
-  let stepValue = 2.5;
-</script>
-
-<Label>Range steps</Label>
-<Range id="range-steps" min="0" max="5" bind:value={stepValue} step="0.5" />
-<p>Value: {stepValue}</p>
-```
-
-## Sizes
-
-```svelte example class="space-y-6"
-<script>
-  import { Range, Label } from 'flowbite-svelte';
-</script>
-
-<Label>Small range</Label>
-<Range id="small-range" size="sm" />
-<Label>Default range</Label>
-<Range id="default-range" size="md" />
-<Label>Large range</Label>
-<Range id="large-range" size="lg" />
-```
-
-## Unknown attributes
-
-Since we added `$$restProps` to input field, you can contain the props which are not declared with export. It will pass down other unknown attributes to an element in a component.
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### Search-input styling
-
-Use the `class` prop to overwrite the default class.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Range Slider](https://flowbite.com/docs/forms/range/)

package/src/routes/docs/forms/search-input.md

@@ -1,133 +0,0 @@
----
-layout: componentLayout
-title: Svelte Search Input - Flowbite
-breadcrumb_title: Svelte Search Input
-component_title: Search Input
-dir: Forms
-description: Use the search input component as a text field to allow users to enter search queries and receive relevant page results available in multiple styles and sizes
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
-  import { Badge, A } from '$lib'
-  import componentData1 from '../../component-data/Search.json'
-  const components = 'Search'
-</script>
-
-The search input component can be used to let your users search through your website using string queries and it comes in multiple styles, variants, and sizes built with the utility classes from Tailwind CSS.
-
-You will also find more advanced search components on this page including dropdown category selections, search buttons positioned inside the input field, voice search fields and more.
-
-## Setup
-
-```svelte example hideOutput
-<script>
-  import { Search } from 'flowbite-svelte';
-</script>
-```
-
-## Search bar example
-
-```svelte example class="flex flex-col gap-4"
-<script>
-  import { Search, Button } from 'flowbite-svelte';
-</script>
-
-<Search>
-  <Button>Search</Button>
-</Search>
-```
-
-## Simple search input
-
-Use the simplest form of a search input component with an icon and a search button next to the text field.
-
-```svelte example class="flex flex-col gap-4"
-<script>
-  import { Search, Button } from 'flowbite-svelte';
-  import { SearchOutline } from 'flowbite-svelte-icons';
-</script>
-
-<form class="flex gap-2">
-  <Search size="md" />
-  <Button class="!p-2.5">
-    <SearchOutline class="w-5 h-5" />
-  </Button>
-</form>
-```
-
-## Voice Search
-
-Get started with this example if you would like to enable voice search for your website and users.
-
-```svelte example class="space-y-4"
-<script>
-  import { Search, Button } from 'flowbite-svelte';
-  import { MicrophoneSolid, SearchOutline } from 'flowbite-svelte-icons';
-  function handleVoiceBtn() {
-    alert('You clicked voice button');
-  }
-</script>
-
-<form class="flex gap-2">
-  <Search size="md" class="flex gap-2 items-center" placeholder="Search Mockups, Logos, Design Templates...">
-    <button type="button" on:click={handleVoiceBtn} class="outline-none">
-      <MicrophoneSolid class="w-4 h-4" />
-    </button>
-  </Search>
-  <Button size="sm">
-    <SearchOutline class="w-5 h-5 mr-2 -ml-1" />
-    Search
-  </Button>
-</form>
-```
-
-## Events
-
-```js
-on: blur;
-on: change;
-on: input;
-on: click;
-on: focus;
-on: keydown;
-on: keypress;
-on: keyup;
-on: mouseenter;
-on: mouseleave;
-on: mouseover;
-on: paste;
-```
-
-## Example
-
-```svelte example class="space-y-4"
-<script>
-  import { Search, Button } from '$lib';
-  let value = '';
-
-  const submitted = () => {
-    alert(`You are searching: ${value}`);
-  };
-</script>
-
-<form id="example-form" on:submit={submitted}>
-  <Search bind:value />
-  <p>You are searching: {value}</p>
-  <Button type="submit">Submit</Button>
-</form>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### Search styling
-
-- Use the `class` prop to overwrite the `Input` tag.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Search Input](https://flowbite.com/docs/forms/search-input/)