flowbite-svelte 0.27.13 → 0.27.15

package/src/lib/forms/Radio.svelte

@@ -0,0 +1,69 @@
+<script context="module" lang="ts">
+  // this part is shared between Radio and Checkbox
+  import classNames from 'classnames';
+
+  const colorClasses: Record<FormColorType, string> = {
+    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
+    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
+    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
+    teal: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600',
+    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600',
+    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
+    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
+  };
+
+  export const labelClass = (inline: boolean, extraClass: string) =>
+    classNames(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
+
+  export const inputClass = (
+    custom: boolean,
+    color: FormColorType,
+    rounded: boolean,
+    tinted: boolean,
+    extraClass: string | boolean
+  ) =>
+    classNames(
+      'w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2',
+      extraClass === true && 'mr-2',
+      tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600',
+      custom && 'sr-only peer',
+      rounded && 'rounded',
+      colorClasses[color],
+      extraClass
+    );
+</script>
+
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { FormColorType } from '../types';
+  import Label from './Label.svelte';
+
+  export let color: FormColorType = 'blue';
+  export let custom: boolean = false;
+  export let inline: boolean = false;
+  export let group: number | string = '';
+  export let value: number | string = '';
+
+  // tinted if put in component having its own background
+  let background: boolean = getContext('background');
+</script>
+
+<Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
+  <input
+    type="radio"
+    bind:group
+    on:blur
+    on:change
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    on:paste
+    {value}
+    {...$$restProps}
+    class={inputClass(custom, color, false, background, $$slots.default || $$props.class)} /><slot />
+</Label>

package/src/lib/forms/Range.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import classNames from 'classnames';
+
+	export let value: number;
+	export let size: 'sm' | 'md' | 'lg' = 'md';
+
+	const sizes = {
+		sm: 'h-1 range-sm',
+		md: 'h-2',
+		lg: 'h-3 range-lg'
+	};
+	let inputClass;
+	$: inputClass = classNames(
+		'w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700',
+		sizes[size] ?? sizes.md,
+		$$props.class
+	);
+</script>
+
+<input
+	type="range"
+	bind:value
+	{...$$restProps}
+	class={inputClass}
+	on:change
+	on:click
+	on:keydown
+	on:keypress
+	on:keyup />

package/src/lib/forms/Search.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { FormSizeType } from '$lib/types';
+  import Wrapper from '$lib/utils/Wrapper.svelte';
+  import Input from './Input.svelte';
+  export let size: FormSizeType = 'lg';
+  export let placeholder: string = 'Search';
+
+  const sizes = {
+    sm: 'w-3.5 h-3.5',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6'
+  };
+</script>
+
+<Wrapper class="relative w-full" show={$$slots.default}>
+  <Input
+    on:blur
+    on:change
+    on:input
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    on:paste
+    type="search"
+    {placeholder}
+    {size}
+    {...$$restProps}
+    class={$$props.class}>
+    <svg
+      slot="left"
+      class={sizes[size]}
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill-rule="evenodd"
+        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+        clip-rule="evenodd" />
+    </svg>
+    <!-- We can use it here. See below. This will trigger right padding
+      <slot slot="right" />
+    -->
+  </Input>
+  <!-- This slot should be within Input as a slot='right'
+    Svelete has an issue with forwarded slots and even empty slot here will appear as existing slot in Input.
+    Due to that we need the below slot and Wrapper around
+  -->
+  {#if $$slots.default}
+    <div class="flex absolute inset-y-0 right-0 items-center pr-3 text-gray-500 dark:text-gray-400">
+      <slot />
+    </div>
+  {/if}
+</Wrapper>

package/src/lib/forms/Select.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import classNames from 'classnames';
+  import type { SelectOptionType } from '../types';
+
+  export let items: SelectOptionType[] = [];
+  export let value: string;
+  export let placeholder: string = 'Choose option ...';
+  export let underline: boolean = false;
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+
+  export let defaultClass: string =
+    'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+
+  export let underlineClass: string =
+    'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
+
+  const common = 'block w-full';
+  const sizes = {
+    sm: 'text-sm p-2',
+    md: 'text-sm p-2.5',
+    lg: 'text-base py-3 px-4'
+  };
+
+  let selectClass;
+  $: selectClass = classNames(
+    common,
+    underline ? underlineClass : defaultClass,
+    sizes[size],
+    underline && '!px-0',
+    $$restProps.class
+  );
+</script>
+
+<select {...$$restProps} bind:value class={selectClass} on:change on:input>
+  <option disabled selected value="">{placeholder}</option>
+
+  {#each items as { value, name }}
+    <option {value}>{name}</option>
+  {/each}
+</select>

package/src/lib/forms/SimpleSearch.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import Search from '$lib/forms/Search.svelte';
+  import Button from '$lib/buttons/Button.svelte';
+</script>
+
+<form class="flex gap-2" on:submit>
+  <Search size="md" {...$$restProps} />
+  <Button class="!p-2.5">
+    <svg
+      class="w-5 h-5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      ><path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+  </Button>
+</form>

package/src/lib/forms/Textarea.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	import { getContext } from 'svelte';
+	import Wrapper from '../utils/Wrapper.svelte';
+
+	const background = getContext('background');
+
+	export let value: string = '';
+
+	let wrapped;
+	$: wrapped = $$slots.header || $$slots.footer;
+
+	let wrapperClass;
+	$: wrapperClass = classNames(
+		'w-full rounded-lg',
+		background ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-700',
+		'text-gray-900 dark:placeholder-gray-400 dark:text-white ',
+		'border border-gray-200 dark:border-gray-600',
+		$$props.class
+	);
+
+	let textareaClass;
+	$: textareaClass = wrapped
+		? classNames(
+				'block w-full',
+				'text-sm',
+				'border-0 px-0',
+				'bg-inherit dark:bg-inherit',
+				'focus:outline-none focus:ring-0'
+		  )
+		: classNames(
+				wrapperClass,
+				'p-2.5 text-sm',
+				'focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500'
+		  );
+
+	const headerClass = (header) =>
+		classNames(header ? 'border-b' : 'border-t', 'py-2 px-3 border-gray-200 dark:border-gray-600');
+
+	let innerWrapperClass;
+	$: innerWrapperClass = classNames(
+		'py-2 px-4 bg-white dark:bg-gray-800',
+		$$slots.footer || 'rounded-b-lg',
+		$$slots.header || 'rounded-t-lg'
+	);
+</script>
+
+<Wrapper show={wrapped} class={wrapperClass}>
+	{#if $$slots.header}
+		<div class={headerClass(true)}>
+			<slot name="header" />
+		</div>
+	{/if}
+	<Wrapper show={wrapped} class={innerWrapperClass}>
+		<textarea
+			bind:value
+			on:blur
+			on:change
+			on:click
+			on:focus
+			on:keydown
+			on:keypress
+			on:keyup
+			on:mouseenter
+			on:mouseleave
+			on:mouseover
+			on:paste
+			{...$$restProps}
+			class={textareaClass}
+		/>
+	</Wrapper>
+	{#if $$slots.footer}
+		<div class={headerClass(false)}>
+			<slot name="footer" />
+		</div>
+	{/if}
+</Wrapper>

package/src/lib/forms/Toggle.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import classNames from 'classnames';
+  import Checkbox from './Checkbox.svelte';
+
+  export let size: 'small' | 'default' | 'large' = 'default';
+  export let group: string[] = [];
+  export let value: string = '';
+  export let checked: boolean = false;
+
+  // tinted if put in component having its own background
+  let background: boolean = getContext('background');
+
+  const common =
+    "mr-3 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all";
+
+  const colors = {
+    red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600',
+    green: 'peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600',
+    purple: 'peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600',
+    yellow: 'peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400',
+    teal: 'peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600',
+    orange: 'peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500',
+    blue: 'peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600'
+  };
+
+  const sizes = {
+    small: 'w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4',
+    default: 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5',
+    large: 'w-14 h-7 after:top-0.5 after:left-[4px]  after:h-6 after:w-6'
+  };
+
+  let divClass: string;
+  $: divClass = classNames(
+    common,
+    background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600',
+    colors[$$restProps.color ?? 'blue'],
+    sizes[size],
+    'relative'
+  );
+</script>
+
+<Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click on:change>
+  <span class={divClass} />
+  <slot />
+</Checkbox>

package/src/lib/forms/VoiceSearch.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	export let id: string = '';
+	export let labelClass: string = 'sr-only';
+	export let iconClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
+	export let iconDivClass: string =
+		'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
+	export let inputClass: string =
+		'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+	export let btnClass: string =
+		'inline-flex items-center py-2.5 px-3 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+	export let voiceBtnClass: string = 'flex absolute inset-y-0 right-0 items-center pr-3';
+	export let voiceIconClass: string =
+		'w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white';
+	export let placeholder: string = 'Search Mockups, Logos, Design Templates...';
+
+	const dispatch = createEventDispatcher();
+
+	const handleVoiceBtn = () => {
+		dispatch('handleVoiceBtn');
+	};
+</script>
+
+<form class="flex items-center" on:submit>
+	<label for={id} class={labelClass}>Search</label>
+	<div class="relative w-full">
+		<div class={iconDivClass}>
+			<svg
+				class={iconClass}
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					fill-rule="evenodd"
+					d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+					clip-rule="evenodd"
+				/></svg
+			>
+		</div>
+		<input {...$$restProps} type="text" {id} class={inputClass} {placeholder} />
+		<button type="button" class={voiceBtnClass} on:click={handleVoiceBtn}>
+			<svg
+				class={voiceIconClass}
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					fill-rule="evenodd"
+					d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z"
+					clip-rule="evenodd"
+				/></svg
+			>
+		</button>
+	</div>
+	<button type="submit" class={btnClass}
+		><svg
+			class="mr-2 -ml-1 w-5 h-5"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+			/></svg
+		>Search</button
+	>
+</form>

package/src/lib/index.ts

@@ -0,0 +1,200 @@
+// Accordion
+export { default as Accordion } from './accordions/Accordion.svelte';
+export { default as AccordionItem } from './accordions/AccordionItem.svelte';
+
+// Alerts
+export { default as Alert } from './alerts/Alert.svelte';
+
+// Avatar
+export { default as Avatar } from './avatar/Avatar.svelte';
+
+// Badges
+export { default as Badge } from './badges/Badge.svelte';
+
+// Breadcrumbs
+export { default as Breadcrumb } from './breadcrumbs/Breadcrumb.svelte';
+export { default as BreadcrumbItem } from './breadcrumbs/BreadcrumbItem.svelte'
+
+// Buttons
+export { default as Button } from './buttons/Button.svelte';
+
+// Buttongroups
+export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
+
+// Cards
+export { default as Card } from './cards/Card.svelte';
+
+// Carousels
+export { default as Carousel } from './carousels/Carousel.svelte';
+export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';
+
+// Dark mode
+export { default as DarkMode } from './darkmode/DarkMode.svelte';
+
+// Datepicker
+export { default as Datepicker } from './datepicker/Datepicker.svelte';
+
+// Drawer
+export { default as Drawer } from './drawer/Drawer.svelte';
+
+// Dropdown
+export { default as Dropdown } from './dropdowns/Dropdown.svelte'
+export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
+export { default as DropdownHeader } from './dropdowns/DropdownHeader.svelte';
+export { default as DropdownItem } from './dropdowns/DropdownItem.svelte';
+
+// Footers
+export { default as Footer } from './footer/Footer.svelte'
+export { default as FooterBrand } from './footer/FooterBrand.svelte'
+export { default as FooterCopyright } from './footer/FooterCopyright.svelte'
+export { default as FooterIcon } from './footer/FooterIcon.svelte'
+export { default as FooterLink } from './footer/FooterLink.svelte'
+export { default as FooterLinkGroup } from './footer/FooterLinkGroup.svelte'
+
+// Forms
+export { default as Checkbox } from './forms/Checkbox.svelte';
+export { default as Dropzone } from './forms/Dropzone.svelte';
+export { default as Fileupload } from './forms/Fileupload.svelte';
+export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte';
+export { default as Helper } from './forms/Helper.svelte';
+export { default as Iconinput } from './forms/Iconinput.svelte';
+export { default as Input } from './forms/Input.svelte';
+export { default as InputAddon } from './forms/InputAddon.svelte';
+export { default as Label } from './forms/Label.svelte';
+export { default as NumberInput } from './forms/NumberInput.svelte';
+export { default as RadioInline } from './forms/RadioInline.svelte';
+export { default as Radio } from './forms/Radio.svelte';
+export { default as Range } from './forms/Range.svelte';
+export { default as Search } from './forms/Search.svelte';
+export { default as Select } from './forms/Select.svelte';
+export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
+export { default as Textarea } from './forms/Textarea.svelte';
+export { default as Toggle } from './forms/Toggle.svelte';
+export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
+
+// Kbd
+export { default as Kbd } from './kbd/Kbd.svelte';
+export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
+export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
+export { default as ArrowKeyRight } from './kbd/ArrowKeyRight.svelte';
+export { default as ArrowKeyUp } from './kbd/ArrowKeyUp.svelte';
+
+// List
+export { default as Listgroup } from './list-group/Listgroup.svelte';
+export { default as ListgroupItem } from './list-group/ListgroupItem.svelte';
+
+// Modals
+export { default as Modal } from './modals/Modal.svelte';
+
+// MegaMenu
+export { default as MegaMenu } from './megamenu/MegaMenu.svelte';
+
+// Navbar
+export { default as Navbar } from './navbar/Navbar.svelte';
+export { default as NavBrand } from './navbar/NavBrand.svelte';
+export { default as NavHamburger } from './navbar/NavHamburger.svelte';
+export { default as NavLi } from './navbar/NavLi.svelte';
+export { default as NavUl } from './navbar/NavUl.svelte';
+
+// Pagination
+export { default as Pagination } from './paginations/Pagination.svelte';
+export { default as PaginationItem } from './paginations/PaginationItem.svelte';
+
+// Popover
+export { default as Popover } from './popover/Popover.svelte'
+
+// Progressbar
+export { default as Progressbar } from './progressbars/Progressbar.svelte';
+
+// Rating
+export { default as Rating } from './ratings/Rating.svelte';
+export { default as AdvancedRating } from './ratings/AdvancedRating.svelte';
+export { default as ScoreRating } from './ratings/ScoreRating.svelte';
+export { default as RatingComment } from './ratings/RatingComment.svelte';
+export { default as Review } from './ratings/Review.svelte'
+
+// Sidebar
+export { default as Sidebar } from './sidebars/Sidebar.svelte';
+export { default as SidebarItem } from './sidebars/SidebarItem.svelte';
+export { default as SidebarBrand } from './sidebars/SidebarBrand.svelte';
+export { default as SidebarCta } from './sidebars/SidebarCta.svelte';
+export { default as SidebarDropdownItem } from './sidebars/SidebarDropdownItem.svelte';
+export { default as SidebarDropdownWrapper } from './sidebars/SidebarDropdownWrapper.svelte';
+export { default as SidebarGroup } from './sidebars/SidebarGroup.svelte';
+export { default as SidebarWrapper } from './sidebars/SidebarWrapper.svelte';
+
+// Skeleton
+export { default as CardPlaceholder } from './skeleton/CardPlaceholder.svelte';
+export { default as ImagePlaceholder } from './skeleton/ImagePlaceholder.svelte';
+export { default as ListPlaceholder } from './skeleton/ListPlaceholder.svelte';
+export { default as Skeleton } from './skeleton/Skeleton.svelte';
+export { default as TestimonialPlaceholder } from './skeleton/TestimonialPlaceholder.svelte';
+export { default as TextPlaceholder } from './skeleton/TextPlaceholder.svelte';
+export { default as VideoPlaceholder } from './skeleton/VideoPlaceholder.svelte';
+export { default as WidgetPlaceholder } from './skeleton/WidgetPlaceholder.svelte';
+
+// Spin
+export { default as Spinner } from './spinners/Spinner.svelte';
+
+// Tables
+export { default as Table } from './tables/Table.svelte';
+export { default as TableBody } from './tables/TableBody.svelte'
+export { default as TableBodyCell } from './tables/TableBodyCell.svelte'
+export { default as TableBodyRow } from './tables/TableBodyRow.svelte'
+export { default as TableHead } from './tables/TableHead.svelte'
+export { default as TableHeadCell } from './tables/TableHeadCell.svelte'
+export { default as TableSearch } from './tables/TableSearch.svelte';
+
+// Tabs
+export { default as TabItem } from './tabs/TabItem.svelte'
+export { default as Tabs } from './tabs/Tabs.svelte'
+
+// Timeline
+export { default as Group } from './timelines/Group.svelte';
+export { default as GroupItem } from './timelines/GroupItem.svelte';
+export { default as Activity } from './timelines/Activity.svelte';
+export { default as ActivityItem } from './timelines/ActivityItem.svelte';
+export { default as Timeline } from './timelines/Timeline.svelte';
+export { default as TimelineItem } from './timelines/TimelineItem.svelte';
+export { default as TimelineHorizontal } from './timelines/TimelineHorizontal.svelte';
+export { default as TimelineItemHorizontal } from './timelines/TimelineItemHorizontal.svelte';
+export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte';
+
+// Toast
+export { default as Toast } from './toasts/Toast.svelte';
+
+// Toolbar
+export { default as Toolbar } from './toolbar/Toolbar.svelte';
+export { default as ToolbarButton } from './toolbar/ToolbarButton.svelte';
+export { default as ToolbarGroup } from './toolbar/ToolbarGroup.svelte';
+
+// Tooltips
+export { default as Tooltip } from './tooltips/Tooltip.svelte';
+
+// Typography
+export { default as A } from './typography/A.svelte';
+export { default as Blockquote } from './typography/Blockquote.svelte';
+export { default as DescriptionList } from './typography/DescriptionList.svelte';
+export { default as Heading } from './typography/Heading.svelte';
+export { default as Hr } from './typography/Hr.svelte'
+export { default as Img } from './typography/Img.svelte'
+export { default as Layout } from './typography/Layout.svelte'
+export { default as Li } from './typography/Li.svelte';
+export { default as Mark } from './typography/Mark.svelte';
+export { default as List } from './typography/List.svelte';
+export { default as P } from './typography/P.svelte';
+export { default as Secondary } from './typography/Secondary.svelte'
+export { default as Span } from './typography/Span.svelte'
+
+// utils
+export { default as CloseButton } from './utils/CloseButton.svelte';
+export { default as ChevronDown } from './utils/ChevronDown.svelte';
+export { default as ChevronLeft } from './utils/ChevronLeft.svelte';
+export { default as ChevronRight } from './utils/ChevronRight.svelte';
+export { default as ChevronUp } from './utils/ChevronUp.svelte';
+export { default as Chevron } from './utils/Chevron.svelte';
+export { default as InformationCircle } from './utils/InformationCircle.svelte';
+export { default as UserCircle } from './utils/UserCircle.svelte';
+
+// video
+export { default as Video } from './video/Video.svelte'

package/src/lib/kbd/ArrowKeyDown.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	export let svgClass: string = 'w-4 h-4';
+</script>
+
+<svg
+	{...$$restProps}
+	class={classNames(svgClass, $$props.class)}
+	aria-hidden="true"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 320 512"
+	><path
+		d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"
+	/></svg
+>

package/src/lib/kbd/ArrowKeyLeft.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	export let svgClass: string = 'w-4 h-4';
+</script>
+
+<svg
+	{...$$restProps}
+	class={classNames(svgClass, $$props.class)}
+	aria-hidden="true"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 320 512"
+	><path
+		d="M137.4 406.6l-128-127.1C3.125 272.4 0 264.2 0 255.1s3.125-16.38 9.375-22.63l128-127.1c9.156-9.156 22.91-11.9 34.88-6.943S192 115.1 192 128v255.1c0 12.94-7.781 24.62-19.75 29.58S146.5 415.8 137.4 406.6z"
+	/></svg
+>

package/src/lib/kbd/ArrowKeyRight.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	export let svgClass: string = 'w-4 h-4';
+</script>
+
+<svg
+	{...$$restProps}
+	class={classNames(svgClass, $$props.class)}
+	aria-hidden="true"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 320 512"
+	><path
+		d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z"
+	/></svg
+>