├── .npmrc
├── src
    ├── lib
    │   ├── Sidebar
    │   │   ├── SidebarItems.svelte
    │   │   ├── SidebarItemGroup.svelte
    │   │   ├── SidebarItemWrapper.svelte
    │   │   ├── Sidebar.svelte
    │   │   ├── SidebarLogo.svelte
    │   │   ├── SidebarCTA.svelte
    │   │   ├── SidebarCollapse.svelte
    │   │   └── SidebarItem.svelte
    │   ├── Table
    │   │   ├── TableBody.svelte
    │   │   ├── TableCell.svelte
    │   │   ├── TableHeadCell.svelte
    │   │   ├── TableHead.svelte
    │   │   ├── TableRow.svelte
    │   │   └── Table.svelte
    │   ├── Avatar
    │   │   ├── AvatarGroup.svelte
    │   │   ├── AvatarGroupCounter.svelte
    │   │   └── Avatar.svelte
    │   ├── Dropdown
    │   │   ├── DropdownDivider.svelte
    │   │   ├── DropdownItem.svelte
    │   │   ├── DropdownHeader.svelte
    │   │   └── Dropdown.svelte
    │   ├── Breadcrumb
    │   │   ├── Breadcrumb.svelte
    │   │   └── BreadcrumbItem.svelte
    │   ├── Navbar
    │   │   ├── NavbarBrand.svelte
    │   │   ├── NavbarCollapse.svelte
    │   │   ├── Navbar.svelte
    │   │   ├── NavbarToggle.svelte
    │   │   └── NavbarLink.svelte
    │   ├── Footer
    │   │   ├── FooterLinkGroup.svelte
    │   │   ├── FooterLink.svelte
    │   │   ├── Footer.svelte
    │   │   ├── FooterCopyright.svelte
    │   │   ├── FooterIcon.svelte
    │   │   └── FooterBrand.svelte
    │   ├── Form
    │   │   ├── FileInput.svelte
    │   │   ├── Radio.svelte
    │   │   ├── Checkbox.svelte
    │   │   ├── Label.svelte
    │   │   ├── ToggleSwitch.svelte
    │   │   ├── Textarea.svelte
    │   │   ├── Select.svelte
    │   │   └── TextInput.svelte
    │   ├── Timeline
    │   │   ├── TimelineTitle.svelte
    │   │   ├── TimelineBody.svelte
    │   │   ├── TimelineTime.svelte
    │   │   ├── TimelineContent.svelte
    │   │   ├── TimelineItem.svelte
    │   │   ├── Timeline.svelte
    │   │   └── TimelinePoint.svelte
    │   ├── Rating
    │   │   ├── Rating.svelte
    │   │   ├── RatingAdvanced.svelte
    │   │   └── RatingStar.svelte
    │   ├── ListGroup
    │   │   ├── ListGroup.svelte
    │   │   └── ListGroupItem.svelte
    │   ├── Modal
    │   │   ├── ModalBody.svelte
    │   │   ├── ModalFooter.svelte
    │   │   ├── ModalHeader.svelte
    │   │   └── Modal.svelte
    │   ├── GenerateExports.py
    │   ├── Accordion
    │   │   ├── Accordion.svelte
    │   │   └── AccordionItem.svelte
    │   ├── clickOutside.ts
    │   ├── Card
    │   │   └── Card.svelte
    │   ├── Toast
    │   │   ├── Toast.svelte
    │   │   └── ToastToggle.svelte
    │   ├── Progress
    │   │   └── Progress.svelte
    │   ├── Badge
    │   │   └── Badge.svelte
    │   ├── Spinner
    │   │   └── Spinner.svelte
    │   ├── Alert
    │   │   └── Alert.svelte
    │   ├── Pagination
    │   │   └── Pagination.svelte
    │   ├── Tooltip
    │   │   └── Tooltip.svelte
    │   └── index.ts
    ├── app.css
    ├── app.d.ts
    ├── app.html
    ├── routes
    │   ├── breadcrumb.svelte
    │   ├── __layout.svelte
    │   ├── index.svelte
    │   ├── pagination.svelte
    │   ├── list-group.svelte
    │   ├── card.svelte
    │   ├── badges.svelte
    │   ├── tooltips.svelte
    │   ├── progress.svelte
    │   ├── spinners.svelte
    │   └── rating.svelte
    └── categories.ts
├── static
    ├── favicon.png
    └── images
    │   ├── badges-dark.svg
    │   ├── badges-light.svg
    │   ├── breadcrumb-dark.svg
    │   ├── breadcrumb-light.svg
    │   ├── tooltips-dark.svg
    │   ├── tooltips-light.svg
    │   ├── buttons.svg
    │   ├── progress-dark.svg
    │   ├── progress-light.svg
    │   ├── button-group-dark.svg
    │   ├── button-group-light.svg
    │   ├── spinners-dark.svg
    │   ├── spinners-light.svg
    │   ├── sidebar-dark.svg
    │   ├── sidebar-light.svg
    │   ├── alerts-dark.svg
    │   ├── alerts-light.svg
    │   ├── carousel-light.svg
    │   ├── carousel-dark.svg
    │   ├── timeline-dark.svg
    │   ├── timeline-light.svg
    │   ├── list-group-dark.svg
    │   ├── tables-dark.svg
    │   ├── tables-light.svg
    │   ├── dropdown-dark.svg
    │   ├── dropdown-light.svg
    │   ├── footer-light.svg
    │   ├── card-dark.svg
    │   ├── card-light.svg
    │   ├── list-group-light.svg
    │   ├── footer-dark.svg
    │   ├── modal-dark.svg
    │   ├── modal-light.svg
    │   ├── accordion-dark.svg
    │   ├── accordion-light.svg
    │   ├── tabs-dark.svg
    │   ├── tabs-light.svg
    │   ├── pagination-light.svg
    │   └── pagination-dark.svg
├── postcss.config.cjs
├── .gitignore
├── tailwind.config.cjs
├── README.md
├── tsconfig.json
├── svelte.config.js
└── package.json


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/src/lib/Sidebar/SidebarItems.svelte:
--------------------------------------------------------------------------------
1 | <div {...$$props}><slot /></div>
2 | 


--------------------------------------------------------------------------------
/src/lib/Table/TableBody.svelte:
--------------------------------------------------------------------------------
1 | <tbody {...$$props}>
2 |   <slot />
3 | </tbody>
4 | 


--------------------------------------------------------------------------------
/src/lib/Avatar/AvatarGroup.svelte:
--------------------------------------------------------------------------------
1 | <div class="mb-5 flex -space-x-4">
2 |   <slot />
3 | </div>
4 | 


--------------------------------------------------------------------------------
/src/lib/Dropdown/DropdownDivider.svelte:
--------------------------------------------------------------------------------
1 | <div class="my-1 h-px bg-gray-100 dark:bg-gray-600" />
2 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/edde746/flowbite-svelte-but-better/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | .vscode
10 | 


--------------------------------------------------------------------------------
/src/lib/Breadcrumb/Breadcrumb.svelte:
--------------------------------------------------------------------------------
1 | <nav aria-label="Breadcrumb" {...$$props}>
2 |   <ol class="flex items-center">
3 |     <slot />
4 |   </ol>
5 | </nav>
6 | 


--------------------------------------------------------------------------------
/src/lib/Navbar/NavbarBrand.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 |   export let href: string = '';
3 | </script>
4 | 
5 | <a {href} class="flex items-center">
6 |   <slot />
7 | </a>
8 | 


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   content: ['./src/**/*.{html,js,svelte,ts}'],
3 |   theme: {
4 |     extend: {},
5 |   },
6 |   plugins: [require('flowbite/plugin')],
7 | };
8 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | code {
 6 |     @apply rounded-lg;
 7 | }
 8 | 
 9 | html {
10 |     @apply h-screen overflow-y-hidden;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/lib/Table/TableCell.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 |   import classNames from 'classnames';
3 | </script>
4 | 
5 | <td {...$$props} class={classNames('px-6 py-4', $$props.class)}>
6 |   <slot />
7 | </td>
8 | 


--------------------------------------------------------------------------------
/src/lib/Table/TableHeadCell.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 |   import classNames from 'classnames';
3 | </script>
4 | 
5 | <th {...$$props} class={classNames('px-6 py-3', $$props.class)}>
6 |   <slot />
7 | </th>
8 | 


--------------------------------------------------------------------------------
/src/lib/Footer/FooterLinkGroup.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import classNames from 'classnames';
3 | </script>
4 | 
5 | <ul class={classNames('flex text-gray-500 dark:text-gray-400 ', $$props.class)}>
6 |   <slot />
7 | </ul>
8 | 


--------------------------------------------------------------------------------
/src/lib/Dropdown/DropdownItem.svelte:
--------------------------------------------------------------------------------
1 | <li
2 |   class="block cursor-pointer py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
3 |   on:click
4 | >
5 |   <slot />
6 | </li>
7 | 


--------------------------------------------------------------------------------
/src/lib/Form/FileInput.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 |   import classNames from 'classnames';
3 | 
4 |   import TextInput from './TextInput.svelte';
5 | </script>
6 | 
7 | <TextInput {...$$props} class={classNames('!p-0', $$props.class)} type="file" />
8 | 


--------------------------------------------------------------------------------
/src/lib/Timeline/TimelineTitle.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 |   import classNames from 'classnames';
3 | </script>
4 | 
5 | <h3 {...$$props} class={classNames('text-lg font-semibold text-gray-900 dark:text-white', $$props.class)}>
6 |   <slot />
7 | </h3>
8 | 


--------------------------------------------------------------------------------
/src/lib/Timeline/TimelineBody.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 |   import classNames from 'classnames';
3 | </script>
4 | 
5 | <p {...$$props} class={classNames('mb-4 text-base font-normal text-gray-500 dark:text-gray-400', $$props.class)}>
6 |   <slot />
7 | </p>
8 | 


--------------------------------------------------------------------------------
/src/lib/Dropdown/DropdownHeader.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 |   import DropdownDivider from './DropdownDivider.svelte';
3 | </script>
4 | 
5 | <div class="block py-2 px-4 text-sm text-gray-700 dark:text-gray-200">
6 |   <slot />
7 | </div>
8 | <DropdownDivider />
9 | 


--------------------------------------------------------------------------------
/src/lib/Timeline/TimelineTime.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | </script>
 4 | 
 5 | <time
 6 |   {...$$props}
 7 |   class={classNames('mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500', $$props.class)}
 8 | >
 9 |   <slot />
10 | </time>
11 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="@sveltejs/kit" />
 2 | 
 3 | // See https://kit.svelte.dev/docs/types#app
 4 | // for information about these interfaces
 5 | declare namespace App {
 6 | 	// interface Locals {}
 7 | 	// interface Platform {}
 8 | 	// interface Session {}
 9 | 	// interface Stuff {}
10 | }
11 | 


--------------------------------------------------------------------------------
/src/lib/Footer/FooterLink.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | 
 4 |   export let href: string = '';
 5 | </script>
 6 | 
 7 | <li class={classNames('mr-4 last:mr-0 md:mr-6', $$props.class)}>
 8 |   <a {href} class="hover:underline">
 9 |     <slot />
10 |   </a>
11 | </li>
12 | 


--------------------------------------------------------------------------------
/src/lib/Footer/Footer.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import classNames from 'classnames';
 3 | </script>
 4 | 
 5 | <footer
 6 |   class={classNames(
 7 |     'w-full rounded-lg bg-white p-4 shadow dark:bg-gray-800 md:flex md:items-center md:justify-between md:p-6',
 8 |     $$props.class
 9 |   )}
10 | >
11 |   <slot />
12 | </footer>
13 | 


--------------------------------------------------------------------------------
/src/lib/Table/TableHead.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | </script>
 4 | 
 5 | <thead
 6 |   {...$$props}
 7 |   class={classNames('bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400', $$props.class)}
 8 | >
 9 |   <tr>
10 |     <slot />
11 |   </tr>
12 | </thead>
13 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%svelte.assets%/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 7 | 		%svelte.head%
 8 | 	</head>
 9 | 	<body>
10 | 		<div>%svelte.body%</div>
11 | 	</body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/lib/Rating/Rating.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { setContext } from 'svelte';
 4 | 
 5 |   export let size: 'sm' | 'md' | 'lg' = 'md';
 6 |   setContext('size', size);
 7 | </script>
 8 | 
 9 | <div class={classNames('flex items-center', $$props.class)}>
10 |   <slot />
11 | </div>
12 | 


--------------------------------------------------------------------------------
/src/lib/Timeline/TimelineContent.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { getContext } from 'svelte';
 4 | </script>
 5 | 
 6 | <div
 7 |   data-testid="timeline-content"
 8 |   {...$$props}
 9 |   class={classNames({ 'mt-3 sm:pr-8': getContext('horizontal') }, $$props.class)}
10 | >
11 |   <slot />
12 | </div>
13 | 


--------------------------------------------------------------------------------
/src/lib/Avatar/AvatarGroupCounter.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   export let total: number = 0;
 3 | </script>
 4 | 
 5 | <a
 6 |   class="relative flex h-10 w-10 items-center justify-center rounded-full bg-gray-700 text-xs font-medium text-white ring-2 ring-gray-300 hover:bg-gray-600  dark:ring-gray-500 "
 7 |   href={$$props.href}
 8 | >
 9 |   +{total}
10 | </a>
11 | 


--------------------------------------------------------------------------------
/src/lib/ListGroup/ListGroup.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | </script>
 4 | 
 5 | <div
 6 |   class={classNames(
 7 |     'list-none rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white',
 8 |     $$props.class
 9 |   )}
10 | >
11 |   <slot />
12 | </div>
13 | 


--------------------------------------------------------------------------------
/static/images/badges-dark.svg:
--------------------------------------------------------------------------------
1 | <svg width="210" height="90" viewBox="0 0 210 90" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <rect x="11" y="21.2837" width="175" height="57" rx="8" fill="#374151"/>
3 |     <rect x="38.5" y="40.7837" width="120" height="18" rx="4" fill="white"/>
4 |     <circle cx="186" cy="24" r="11" fill="#E02424" stroke="white" stroke-width="2"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/src/lib/Form/Radio.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | </script>
 4 | 
 5 | <input
 6 |   {...$$props}
 7 |   class={classNames(
 8 |     'h-4 w-4 border border-gray-300 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:focus:bg-blue-600 dark:focus:ring-blue-600',
 9 |     $$props.class
10 |   )}
11 |   type="radio"
12 | />
13 | 


--------------------------------------------------------------------------------
/static/images/badges-light.svg:
--------------------------------------------------------------------------------
1 | <svg width="210" height="90" viewBox="0 0 210 90" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <rect x="11" y="21.2837" width="175" height="57" rx="8" fill="#D1D5DB"/>
3 |     <rect x="38.5" y="40.7837" width="120" height="18" rx="4" fill="white"/>
4 |     <circle cx="186" cy="24" r="11" fill="#E02424" stroke="white" stroke-width="2"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/src/lib/Modal/ModalBody.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { getContext } from 'svelte';
 4 | 
 5 |   const context = getContext<{ popup: boolean }>('modal');
 6 | </script>
 7 | 
 8 | <div
 9 |   class={classNames(
10 |     'p-6',
11 |     {
12 |       'pt-0': context.popup,
13 |     },
14 |     $$props.class
15 |   )}
16 | >
17 |   <slot />
18 | </div>
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # flowbite-svelte but better
 2 | 
 3 | Clone of flowbite-react but for Svelte without the jank of flowbite-svelte.
 4 | 
 5 | ## Using
 6 | 
 7 | Run
 8 | ```
 9 | npm i @edde746/flowbite-svelte
10 | ```
11 | 
12 | then use like this:
13 | ```html
14 | <script>
15 |     import { Button } from '@edde746/flowbite-svelte';
16 | </script>
17 | 
18 | <Button color="blue">Hello World</Button>
19 | ```
20 | 


--------------------------------------------------------------------------------
/src/lib/Navbar/NavbarCollapse.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   export let open: boolean = false;
 4 | </script>
 5 | 
 6 | <div class={classNames('w-full md:block md:w-auto', { hidden: !open })} data-testid="navbar-collapse">
 7 |   <ul class="mt-4 flex flex-col md:mt-0 md:flex-row md:space-x-8 md:text-sm md:font-medium">
 8 |     <slot />
 9 |   </ul>
10 | </div>
11 | 


--------------------------------------------------------------------------------
/src/lib/GenerateExports.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | 
 3 | output = ''
 4 | for dir in os.listdir('.'):
 5 |     if not os.path.isdir(dir):
 6 |         continue
 7 |     output += '/* ' + dir + ' */\n'
 8 |     for file in os.listdir(dir):
 9 |         if file.endswith('.svelte'):
10 |             output += 'export { default as ' + file.split('.')[0] + ' } from \'./'+dir+'/'+file+'\';\n'
11 | 
12 | open('index.ts','w').write(output)
13 | 


--------------------------------------------------------------------------------
/src/lib/Timeline/TimelineItem.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { getContext } from 'svelte';
 4 | </script>
 5 | 
 6 | <li
 7 |   data-testid="timeline-item"
 8 |   {...$$props}
 9 |   class={classNames(
10 |     { 'mb-10 ml-6': !getContext('horizontal'), 'relative mb-6 sm:mb-0': getContext('horizontal') },
11 |     $$props.class
12 |   )}
13 | >
14 |   <slot />
15 | </li>
16 | 


--------------------------------------------------------------------------------
/src/lib/Sidebar/SidebarItemGroup.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { setContext } from 'svelte';
 4 |   setContext('insideCollapse', false);
 5 | </script>
 6 | 
 7 | <ul
 8 |   {...$$props}
 9 |   class={classNames(
10 |     'mt-4 space-y-2 border-t border-gray-200 pt-4 first:mt-0 first:border-t-0 first:pt-0 dark:border-gray-700'
11 |   )}
12 |   data-testid="sidebar-item-group"
13 | >
14 |   <slot />
15 | </ul>
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"lib": ["es2020", "DOM"],
 9 | 		"moduleResolution": "node",
10 | 		"module": "es2020",
11 | 		"resolveJsonModule": true,
12 | 		"skipLibCheck": true,
13 | 		"sourceMap": true,
14 | 		"strict": true,
15 | 		"target": "es2020"
16 | 	}
17 | }
18 | 


--------------------------------------------------------------------------------
/src/lib/Modal/ModalFooter.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { getContext } from 'svelte';
 4 | 
 5 |   const context = getContext<{ popup: boolean }>('modal');
 6 | </script>
 7 | 
 8 | <div
 9 |   class={classNames(
10 |     'flex items-center space-x-2 rounded-b border-gray-200 p-6 dark:border-gray-600',
11 |     {
12 |       'border-t': !context.popup,
13 |     },
14 |     $$props.class
15 |   )}
16 | >
17 |   <slot />
18 | </div>
19 | 


--------------------------------------------------------------------------------
/src/lib/Form/Checkbox.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | 
 4 |   export let checked: boolean = false;
 5 | </script>
 6 | 
 7 | <input
 8 |   {...$$props}
 9 |   class={classNames(
10 |     'h-4 w-4 rounded border border-gray-300 bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600',
11 |     $$props.class
12 |   )}
13 |   type="checkbox"
14 |   bind:checked
15 | />
16 | 


--------------------------------------------------------------------------------
/src/lib/Timeline/Timeline.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { setContext } from 'svelte';
 4 | 
 5 |   export let horizontal: boolean = false;
 6 |   $: setContext('horizontal', horizontal);
 7 | </script>
 8 | 
 9 | <ol
10 |   data-testid="timeline-component"
11 |   class={classNames({
12 |     'relative border-l border-gray-200 dark:border-gray-700': !horizontal,
13 |     'items-center sm:flex': horizontal,
14 |   })}
15 | >
16 |   <slot />
17 | </ol>
18 | 


--------------------------------------------------------------------------------
/src/lib/Accordion/Accordion.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { setContext } from 'svelte';
 4 | 
 5 |   export let flush: boolean = false;
 6 |   setContext('flush', flush);
 7 | </script>
 8 | 
 9 | <div
10 |   data-testid="accordion-element"
11 |   class={classNames('divide-y divide-gray-200 border-gray-200 dark:divide-gray-700 dark:border-gray-700', {
12 |     'rounded-lg border': !flush,
13 |     'border-b': flush,
14 |   })}
15 | >
16 |   <slot />
17 | </div>
18 | 


--------------------------------------------------------------------------------
/src/lib/clickOutside.ts:
--------------------------------------------------------------------------------
 1 | export function clickOutside(node: HTMLElement, callback: () => void) {
 2 |   const handleClick = (event: MouseEvent) => {
 3 |     if (!event?.target) return;
 4 |     if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
 5 |       callback();
 6 |     }
 7 |   };
 8 | 
 9 |   document.addEventListener('click', handleClick, true);
10 | 
11 |   return {
12 |     destroy() {
13 |       document.removeEventListener('click', handleClick, true);
14 |     },
15 |   };
16 | }
17 | 


--------------------------------------------------------------------------------
/src/lib/Table/TableRow.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { getContext } from 'svelte';
 4 | </script>
 5 | 
 6 | <tr
 7 |   data-testid="table-row-element"
 8 |   {...$$props}
 9 |   class={classNames(
10 |     {
11 |       'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700': getContext('striped') === true,
12 |       'hover:bg-gray-50 dark:hover:bg-gray-600': getContext('hoverable') === true,
13 |     },
14 |     $$props.class
15 |   )}
16 | >
17 |   <slot />
18 | </tr>
19 | 


--------------------------------------------------------------------------------
/static/images/breadcrumb-dark.svg:
--------------------------------------------------------------------------------
1 | <svg width="510" height="80" viewBox="0 0 510 80" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <rect x="17" y="31" width="85" height="18" rx="2" fill="#6B7280"/>
3 |     <path d="M162.541 25.5909H159.128L150.69 56.9375H154.104L162.541 25.5909Z" fill="#6B7280"/>
4 |     <rect x="212" y="31" width="85" height="18" rx="2" fill="#6B7280"/>
5 |     <path d="M357.541 25.5909H354.128L345.69 56.9375H349.104L357.541 25.5909Z" fill="#6B7280"/>
6 |     <rect x="407" y="31" width="85" height="18" rx="2" fill="#1C64F2"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/lib/Form/Label.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | 
 4 |   export let color: 'gray' | 'green' | 'red' = 'gray';
 5 | 
 6 |   const colorClasses = {
 7 |     gray: 'text-gray-900 dark:text-gray-300',
 8 |     green: 'text-green-700 dark:text-green-500',
 9 |     red: 'text-red-700 dark:text-red-500',
10 |   };
11 | </script>
12 | 
13 | <!-- svelte-ignore a11y-label-has-associated-control -->
14 | <label {...$$props} class={classNames('text-sm font-medium', colorClasses[color], $$props.class)}>
15 |   <slot />
16 | </label>
17 | 


--------------------------------------------------------------------------------
/src/lib/Rating/RatingAdvanced.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   export let percentFilled: number;
 3 | </script>
 4 | 
 5 | <div class="flex items-center">
 6 |   <span class="text-sm font-medium text-blue-600 dark:text-blue-500">
 7 |     <slot />
 8 |   </span>
 9 |   <div class="mx-4 h-5 w-2/4 rounded bg-gray-200 dark:bg-gray-700">
10 |     <div class="h-5 rounded bg-yellow-400" data-testid="rating-fill" style={`width:${percentFilled}%`} />
11 |   </div>
12 |   <span class="text-sm font-medium text-blue-600 dark:text-blue-500">{percentFilled}%</span>
13 | </div>
14 | 


--------------------------------------------------------------------------------
/static/images/breadcrumb-light.svg:
--------------------------------------------------------------------------------
1 | <svg width="510" height="80" viewBox="0 0 510 80" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <rect x="17" y="30" width="85" height="18" rx="2" fill="#D1D5DB"/>
3 |     <path d="M162.541 24.5909H159.128L150.69 55.9375H154.104L162.541 24.5909Z" fill="#A1A1AA"/>
4 |     <rect x="212" y="30" width="85" height="18" rx="2" fill="#D1D5DB"/>
5 |     <path d="M357.541 24.5909H354.128L345.69 55.9375H349.104L357.541 24.5909Z" fill="#A1A1AA"/>
6 |     <rect x="407" y="30" width="85" height="18" rx="2" fill="#1A56DB"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/static/images/tooltips-dark.svg:
--------------------------------------------------------------------------------
1 | <svg width="160" height="125" viewBox="0 0 160 125" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <rect x="4" y="69.5591" width="151" height="50" rx="8" fill="#1C64F2"/>
3 |     <rect x="28" y="89.5591" width="103" height="10" rx="2" fill="white"/>
4 |     <rect x="4" y="5" width="151" height="44.2268" rx="6" fill="#4B5563"/>
5 |     <rect x="61.863" y="41.9502" width="25" height="25" transform="rotate(-48.892 61.863 41.9502)" fill="#4B5563"/>
6 |     <rect x="28" y="22.1134" width="103" height="10" rx="2" fill="#9CA3AF"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/static/images/tooltips-light.svg:
--------------------------------------------------------------------------------
1 | <svg width="160" height="125" viewBox="0 0 160 125" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <rect x="5" y="69.5591" width="151" height="50" rx="8" fill="#1A56DB"/>
3 |     <rect x="29" y="89.5591" width="103" height="10" rx="2" fill="white"/>
4 |     <rect x="5" y="5" width="151" height="44.2268" rx="6" fill="#E5E7EB"/>
5 |     <rect x="62.863" y="41.9502" width="25" height="25" transform="rotate(-48.892 62.863 41.9502)" fill="#E5E7EB"/>
6 |     <rect x="29" y="22.1134" width="103" height="10" rx="2" fill="#D1D5DB"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/lib/Footer/FooterCopyright.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | 
 4 |   export let year: number = new Date().getFullYear();
 5 |   export let href: string = '';
 6 |   export let by: string = '';
 7 | </script>
 8 | 
 9 | <span class={classNames('text-sm text-gray-500 dark:text-gray-400 sm:text-center', $$props.class)}>
10 |   &copy; {year}
11 |   {#if href}
12 |     <a {href} class="ml-1 hover:underline">
13 |       {by}
14 |     </a>
15 |   {:else}
16 |     <span class="ml-1">{by}</span>
17 |   {/if}
18 |   . All Rights Reserved.
19 | </span>
20 | 


--------------------------------------------------------------------------------
/src/lib/Footer/FooterIcon.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import type { SvelteComponent } from 'svelte';
 4 | 
 5 |   export let href: string = '';
 6 |   export let ariaLabel: string = '';
 7 |   export let icon: typeof SvelteComponent | null = null;
 8 | </script>
 9 | 
10 | {#if href}
11 |   <a {href} aria-label={ariaLabel} class={classNames('text-gray-500 dark:hover:text-white', $$props.class)}>
12 |     <svelte:component this={icon} class="h-5 w-5" />
13 |   </a>
14 | {:else}
15 |   <svelte:component this={icon} class="h-5 w-5" />
16 | {/if}
17 | 


--------------------------------------------------------------------------------
/src/lib/Table/Table.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { setContext } from 'svelte';
 4 | 
 5 |   export let striped: boolean = false;
 6 |   export let hoverable: boolean = false;
 7 | 
 8 |   $: setContext('striped', striped);
 9 |   $: setContext('hoverable', hoverable);
10 | </script>
11 | 
12 | <div data-testid="table-element" class="relative overflow-x-auto shadow-md sm:rounded-lg">
13 |   <table {...$$props} class={classNames('w-full text-left text-sm text-gray-500 dark:text-gray-400', $$props.class)}>
14 |     <slot />
15 |   </table>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/lib/Footer/FooterBrand.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | 
 4 |   export let href: string = '';
 5 |   export let src: string = '';
 6 |   export let alt: string = '';
 7 |   export let name: string = '';
 8 | </script>
 9 | 
10 | {#if href}
11 |   <a {href} class={classNames('mb-4 flex items-center sm:mb-0', $$props.class)}>
12 |     <img {src} class="mr-3 h-8" {alt} />
13 |     <span class="self-center whitespace-nowrap text-2xl font-semibold dark:text-white">{name}</span>
14 |     <slot />
15 |   </a>
16 | {:else}
17 |   <img {src} class="mr-3 h-8" {alt} />
18 | {/if}
19 | 


--------------------------------------------------------------------------------
/src/lib/Sidebar/SidebarItemWrapper.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import Tooltip from '../Tooltip/Tooltip.svelte';
 3 |   import { getContext } from 'svelte';
 4 |   import type { Writable } from 'svelte/store';
 5 | 
 6 |   const collapsed = getContext<Writable<boolean>>('collapsed');
 7 | </script>
 8 | 
 9 | <li data-testid="sidebar-item">
10 |   {#if $collapsed === true}
11 |     <Tooltip data-testid="sidebar-item-tooltip" placement="right">
12 |       <slot />
13 |       <div slot="content">
14 |         <slot name="tooltip" />
15 |       </div>
16 |     </Tooltip>
17 |   {:else}
18 |     <slot />
19 |   {/if}
20 | </li>
21 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | import preprocess from 'svelte-preprocess';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 |   // Consult https://github.com/sveltejs/svelte-preprocess
 7 |   // for more information about preprocessors
 8 |   preprocess: preprocess(),
 9 | 
10 |   kit: {
11 |     adapter: adapter(),
12 |     vite: {
13 |       ssr: {
14 |         noExternal: ['svelte-icons'],
15 |       },
16 |       optimizeDeps: {
17 |         include: ['highlight.js', 'highlight.js/lib/core'],
18 |       },
19 |     },
20 |   },
21 | };
22 | 
23 | export default config;
24 | 


--------------------------------------------------------------------------------
/src/lib/Navbar/Navbar.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | 
 4 |   export let fluid: boolean = false;
 5 |   export let rounded: boolean = false;
 6 |   export let border: boolean = false;
 7 | </script>
 8 | 
 9 | <nav
10 |   class={classNames(
11 |     $$props.class,
12 |     'border-gray-200 bg-white px-2 py-2.5 dark:border-gray-700 dark:bg-gray-800 sm:px-4',
13 |     {
14 |       rounded: rounded,
15 |       border: border,
16 |     }
17 |   )}
18 | >
19 |   <div
20 |     class={classNames('mx-auto flex flex-wrap items-center justify-between', {
21 |       container: !fluid,
22 |     })}
23 |   >
24 |     <slot />
25 |   </div>
26 | </nav>
27 | 


--------------------------------------------------------------------------------
/src/lib/Navbar/NavbarToggle.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { HiMenuOutline } from 'svelte-icons/hi';
 4 | 
 5 |   export let open: boolean = false;
 6 | </script>
 7 | 
 8 | <button
 9 |   class={classNames(
10 |     'ml-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden'
11 |   )}
12 |   data-testid="navbar-toggle"
13 |   on:click={() => (open = !open)}
14 | >
15 |   <span class="sr-only">Open main menu</span>
16 |   <HiMenuOutline class="h-6 w-6 shrink-0" />
17 | </button>
18 | 


--------------------------------------------------------------------------------
/src/lib/Sidebar/Sidebar.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { setContext } from 'svelte';
 4 |   import { writable } from 'svelte/store';
 5 | 
 6 |   export let collapsed: boolean = false;
 7 | 
 8 |   const collapsedState = writable(collapsed);
 9 |   $: collapsedState.set(collapsed);
10 |   setContext('collapsed', collapsedState);
11 | </script>
12 | 
13 | <aside aria-label="Sidebar" {...$$props} class={classNames('h-full', collapsed ? 'w-16' : 'w-64')}>
14 |   <div
15 |     class={classNames(
16 |       'h-full overflow-y-auto overflow-x-hidden rounded bg-white py-4 px-3 dark:bg-gray-800',
17 |       $$props.class
18 |     )}
19 |   >
20 |     <slot />
21 |   </div>
22 | </aside>
23 | 


--------------------------------------------------------------------------------
/src/lib/Rating/RatingStar.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { getContext, SvelteComponent } from 'svelte';
 4 |   import { HiStarSolid } from 'svelte-icons/hi';
 5 | 
 6 |   export let filled: boolean = true;
 7 |   export let starIcon: typeof SvelteComponent = HiStarSolid;
 8 | 
 9 |   const sizeClasses = {
10 |     sm: 'w-5 h-5',
11 |     md: 'w-7 h-7',
12 |     lg: 'w-10 h-10',
13 |   };
14 | 
15 |   const size = getContext<'sm' | 'md' | 'lg'>('size');
16 | </script>
17 | 
18 | <svelte:component
19 |   this={starIcon}
20 |   class={classNames(sizeClasses[size], {
21 |     'text-yellow-400': filled,
22 |     'text-gray-300 dark:text-gray-500': !filled,
23 |   })}
24 |   data-testid="rating-star"
25 | />
26 | 


--------------------------------------------------------------------------------
/static/images/buttons.svg:
--------------------------------------------------------------------------------
 1 | <svg width="240" height="230" viewBox="0 0 240 230" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <rect x="6" y="6" width="227" height="59" rx="8" fill="#1A56DB"/>
 3 |     <rect x="30" y="30" width="179" height="11" rx="4" fill="white"/>
 4 |     <rect x="6" y="85" width="227" height="59" rx="8" fill="#1A56DB"/>
 5 |     <rect x="30" y="109" width="18.0268" height="11" rx="4" fill="white"/>
 6 |     <rect x="58.0267" y="109" width="150.973" height="11" rx="4" fill="white"/>
 7 |     <rect x="6" y="164" width="227" height="59" rx="8" fill="#1A56DB"/>
 8 |     <rect x="30" y="188" width="150.973" height="11" rx="4" fill="white"/>
 9 |     <rect x="190.973" y="188" width="18.0268" height="11" rx="4" fill="white"/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/static/images/progress-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="340" height="130" viewBox="0 0 340 130" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <rect x="12" y="110" width="315.08" height="12" rx="6" fill="#374151"/>
 3 |     <rect x="12" y="110" width="99.8079" height="12" rx="6" fill="#6B7280"/>
 4 |     <rect x="12" y="95" width="55.3654" height="5" rx="2.5" fill="#6B7280"/>
 5 |     <rect x="12" y="59" width="315.08" height="12" rx="6" fill="#374151"/>
 6 |     <rect x="12" y="59" width="189.353" height="12" rx="6" fill="#6B7280"/>
 7 |     <rect x="272" y="44" width="55.3654" height="5" rx="2.5" fill="#6B7280"/>
 8 |     <rect x="12" y="8" width="315.08" height="12" rx="6" fill="#374151"/>
 9 |     <rect x="12" y="8" width="151.5" height="12" rx="6" fill="#6B7280"/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/static/images/progress-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="340" height="130" viewBox="0 0 340 130" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <rect x="12" y="110" width="315.08" height="12" rx="6" fill="#D1D5DB"/>
 3 |     <rect x="12" y="110" width="99.8079" height="12" rx="6" fill="#9CA3AF"/>
 4 |     <rect x="12" y="95" width="55.3654" height="5" rx="2.5" fill="#D1D5DB"/>
 5 |     <rect x="12" y="59" width="315.08" height="12" rx="6" fill="#D1D5DB"/>
 6 |     <rect x="12" y="59" width="189.353" height="12" rx="6" fill="#9CA3AF"/>
 7 |     <rect x="272" y="44" width="55.3654" height="5" rx="2.5" fill="#D1D5DB"/>
 8 |     <rect x="12" y="8" width="315.08" height="12" rx="6" fill="#D1D5DB"/>
 9 |     <rect x="12" y="8" width="151.5" height="12" rx="6" fill="#9CA3AF"/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/static/images/button-group-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="370" height="48" viewBox="0 0 370 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <path d="M3 11C3 6.58172 6.58172 3 11 3H124V45H11C6.58172 45 3 41.4183 3 37V11Z" fill="#1C64F2"/>
 3 |     <rect x="25" y="17.5" width="77" height="13" rx="2" fill="white"/>
 4 |     <line x1="123.5" y1="45.0664" x2="123.5" y2="3.00003" stroke="#1A56DB"/>
 5 |     <rect width="121" height="42" transform="translate(124 3)" fill="#1C64F2"/>
 6 |     <rect x="146" y="17.5" width="77" height="13" rx="2" fill="white"/>
 7 |     <line x1="244.5" y1="45.0664" x2="244.5" y2="3.00003" stroke="#1A56DB"/>
 8 |     <path d="M245 3H358C362.418 3 366 6.58172 366 11V37C366 41.4183 362.418 45 358 45H245V3Z" fill="#1C64F2"/>
 9 |     <rect x="267" y="17.5" width="77" height="13" rx="2" fill="white"/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/static/images/button-group-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="370" height="48" viewBox="0 0 370 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <path d="M3 11C3 6.58172 6.58172 3 11 3H124V45H11C6.58172 45 3 41.4183 3 37V11Z" fill="#1A56DB"/>
 3 |     <rect x="25" y="17.5" width="77" height="13" rx="2" fill="white"/>
 4 |     <line x1="123.5" y1="45.0664" x2="123.5" y2="3.00003" stroke="#1E429F"/>
 5 |     <rect width="121" height="42" transform="translate(124 3)" fill="#1A56DB"/>
 6 |     <rect x="146" y="17.5" width="77" height="13" rx="2" fill="white"/>
 7 |     <line x1="244.5" y1="45.0664" x2="244.5" y2="3.00003" stroke="#1E429F"/>
 8 |     <path d="M245 3H358C362.418 3 366 6.58172 366 11V37C366 41.4183 362.418 45 358 45H245V3Z" fill="#1A56DB"/>
 9 |     <rect x="267" y="17.5" width="77" height="13" rx="2" fill="white"/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/src/lib/Form/ToggleSwitch.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | 
 4 |   export let checked: boolean = false;
 5 |   export let label: string = '';
 6 |   export let disabled: boolean = false;
 7 | </script>
 8 | 
 9 | <label
10 |   for={$$props.id}
11 |   class={classNames(
12 |     'relative flex items-center',
13 |     {
14 |       'cursor-not-allowed opacity-50': disabled,
15 |       'cursor-pointer': !disabled,
16 |     },
17 |     $$props.class
18 |   )}
19 | >
20 |   <input {...$$props} type="checkbox" id={$$props.id} class="sr-only" {disabled} bind:checked />
21 |   <div
22 |     class="toggle-bg h-6 w-11 rounded-full border border-gray-200 bg-gray-200 dark:border-gray-600 dark:bg-gray-700"
23 |   />
24 |   <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
25 |     <slot>{label}</slot>
26 |   </span>
27 | </label>
28 | 


--------------------------------------------------------------------------------
/src/lib/Navbar/NavbarLink.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | 
 4 |   export let href: string = '';
 5 |   export let active: boolean = false;
 6 |   export let disabled: boolean = false;
 7 | </script>
 8 | 
 9 | <li>
10 |   <a
11 |     {href}
12 |     class={classNames('block py-2 pr-4 pl-3 md:p-0', {
13 |       'bg-blue-700 text-white dark:text-white md:bg-transparent md:text-blue-700': active,
14 |       'border-b border-gray-100  text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:border-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-white':
15 |         !active && !disabled,
16 |       'text-gray-400 hover:cursor-not-allowed dark:text-gray-600': disabled,
17 |     })}
18 |   >
19 |     <slot />
20 |   </a>
21 | </li>
22 | 


--------------------------------------------------------------------------------
/src/lib/Modal/ModalHeader.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { getContext } from 'svelte';
 4 |   import { HiXOutline } from 'svelte-icons/hi';
 5 | 
 6 |   const context = getContext<{ popup: boolean; onClose: () => void }>('modal');
 7 | </script>
 8 | 
 9 | <div
10 |   class={classNames('flex items-center justify-between rounded-t dark:border-gray-600', {
11 |     'p-2': context.popup,
12 |     'border-b p-5': !context.popup,
13 |   })}
14 | >
15 |   <h3 class="text-xl font-medium text-gray-900 dark:text-white">
16 |     <slot />
17 |   </h3>
18 |   <button
19 |     class="ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
20 |     type="button"
21 |     on:click={() => context.onClose()}
22 |   >
23 |     <HiXOutline className="h-5 w-5" />
24 |   </button>
25 | </div>
26 | 


--------------------------------------------------------------------------------
/src/lib/Card/Card.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   export let horizontal: boolean = false;
 4 |   export let imgAlt: string = '';
 5 |   export let imgSrc: string = '';
 6 | </script>
 7 | 
 8 | <div
 9 |   class={classNames(
10 |     'flex rounded-lg border border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800',
11 |     {
12 |       'flex-col': !horizontal,
13 |       'flex-col md:max-w-xl md:flex-row': horizontal,
14 |     },
15 |     $$props.class
16 |   )}
17 | >
18 |   {#if imgSrc}
19 |     <img
20 |       class={classNames({
21 |         'rounded-t-lg': !horizontal,
22 |         'h-96 w-full rounded-t-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg': horizontal,
23 |       })}
24 |       src={imgSrc}
25 |       alt={imgAlt ?? ''}
26 |     />
27 |   {/if}
28 |   <div class="flex h-full flex-col justify-center gap-4 p-6">
29 |     <slot />
30 |   </div>
31 | </div>
32 | 


--------------------------------------------------------------------------------
/src/lib/Sidebar/SidebarLogo.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { getContext } from 'svelte';
 4 |   import type { Writable } from 'svelte/store';
 5 | 
 6 |   export let href: string;
 7 |   export let img: string;
 8 |   export let imgAlt: string;
 9 | 
10 |   const collapsed = getContext<Writable<boolean>>('collapsed');
11 | </script>
12 | 
13 | <a
14 |   {...$$props}
15 |   class={classNames(
16 |     'mb-5 flex items-center',
17 |     {
18 |       'pl-2': !$collapsed,
19 |       'justify-center': $collapsed,
20 |     },
21 |     $$props.class
22 |   )}
23 |   {href}
24 | >
25 |   <img
26 |     alt={imgAlt}
27 |     class={classNames(
28 |       {
29 |         'mr-3': !$collapsed,
30 |       },
31 |       'h-6 sm:h-7 object-contain'
32 |     )}
33 |     src={img}
34 |   />
35 |   <span
36 |     class={classNames(
37 |       $collapsed === true ? 'sr-only' : 'self-center whitespace-nowrap text-xl font-semibold dark:text-white'
38 |     )}
39 |     data-testid="sidebar-logo"
40 |   >
41 |     <slot />
42 |   </span>
43 | </a>
44 | 


--------------------------------------------------------------------------------
/src/lib/Timeline/TimelinePoint.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { getContext, type SvelteComponent } from 'svelte';
 4 | 
 5 |   export let icon: typeof SvelteComponent | null = null;
 6 | </script>
 7 | 
 8 | <div
 9 |   data-testid="timeline-point"
10 |   {...$$props}
11 |   class={classNames({ 'flex items-center': getContext('horizontal') }, $$props.class)}
12 | >
13 |   <slot />
14 |   {#if icon}
15 |     <span
16 |       class="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-blue-200 ring-8 ring-white dark:bg-blue-900 dark:ring-gray-900"
17 |     >
18 |       <svelte:component this={icon} aria-hidden class="h-3 w-3 text-blue-600 dark:text-blue-300" />
19 |     </span>
20 |   {:else}
21 |     <div
22 |       class="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700"
23 |     />
24 |   {/if}
25 |   {#if getContext('horizontal')}
26 |     <div class="hidden h-0.5 w-full bg-gray-200 dark:bg-gray-700 sm:flex" />
27 |   {/if}
28 | </div>
29 | 


--------------------------------------------------------------------------------
/src/lib/Sidebar/SidebarCTA.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { getContext } from 'svelte';
 4 |   import type { Writable } from 'svelte/store';
 5 | 
 6 |   export let color: 'blue' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' = 'blue';
 7 | 
 8 |   const colorClasses = {
 9 |     blue: 'bg-blue-50 dark:bg-blue-900',
10 |     alternative: 'bg-alternative-50 dark:bg-alternative-900',
11 |     dark: 'bg-dark-50 dark:bg-dark-900',
12 |     light: 'bg-light-50 dark:bg-light-900',
13 |     green: 'bg-green-50 dark:bg-green-900',
14 |     red: 'bg-red-50 dark:bg-red-900',
15 |     yellow: 'bg-yellow-50 dark:bg-yellow-900',
16 |     purple: 'bg-purple-50 dark:bg-purple-900',
17 |   };
18 | 
19 |   const collapsed = getContext<Writable<boolean>>('collapsed');
20 | </script>
21 | 
22 | {#if $collapsed === false}
23 |   <div
24 |     {...$$props}
25 |     class={classNames('mt-6 rounded-lg p-4', colorClasses[color], $$props.class)}
26 |     data-testid="sidebar-cta"
27 |   >
28 |     <slot />
29 |   </div>
30 | {/if}
31 | 


--------------------------------------------------------------------------------
/src/lib/Toast/Toast.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { setContext } from 'svelte';
 4 |   import { writable } from 'svelte/store';
 5 | 
 6 |   export let duration: 75 | 100 | 150 | 200 | 300 | 500 | 700 | 1000 = 300;
 7 | 
 8 |   const state = writable({
 9 |     isClosed: false,
10 |     isRemoved: false,
11 |     duration: duration,
12 |   });
13 |   setContext('state', state);
14 | 
15 |   const durationClasses = {
16 |     75: 'duration-75',
17 |     100: 'duration-100',
18 |     150: 'duration-150',
19 |     200: 'duration-200',
20 |     300: 'duration-300',
21 |     500: 'duration-500',
22 |     700: 'duration-700',
23 |     1000: 'duration-1000',
24 |   };
25 | </script>
26 | 
27 | <div
28 |   data-testid="toast-element"
29 |   class={classNames(
30 |     'flex w-full max-w-xs items-center rounded-lg bg-white p-4 text-gray-500 shadow dark:bg-gray-800 dark:text-gray-400',
31 |     durationClasses[duration],
32 |     { 'opacity-0 ease-out': $state.isClosed },
33 |     { hidden: $state.isRemoved },
34 |     $$props.class
35 |   )}
36 | >
37 |   <slot />
38 | </div>
39 | 


--------------------------------------------------------------------------------
/src/lib/Toast/ToastToggle.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { getContext } from 'svelte';
 4 |   import { HiXOutline } from 'svelte-icons/hi';
 5 |   import { get, type Writable } from 'svelte/store';
 6 | 
 7 |   const state = getContext<
 8 |     Writable<{
 9 |       isClosed: boolean;
10 |       isRemoved: boolean;
11 |       duration: number;
12 |     }>
13 |   >('state');
14 | </script>
15 | 
16 | <button
17 |   data-testid="toast-toggle-element"
18 |   type="button"
19 |   class="-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 rounded-lg bg-white p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
20 |   on:click={() => {
21 |     state.update((v) => ({
22 |       ...v,
23 |       isClosed: true,
24 |     }));
25 |     setTimeout(() => {
26 |       state.update((v) => ({
27 |         ...v,
28 |         isRemoved: true,
29 |       }));
30 |     }, get(state).duration || 300);
31 |   }}
32 | >
33 |   <span class="sr-only">Close</span>
34 |   <HiXOutline class="h-5 w-5 shrink-0" />
35 | </button>
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@edde746/flowbite-svelte",
 3 |   "version": "0.0.16",
 4 |   "scripts": {
 5 |     "dev": "svelte-kit dev",
 6 |     "build": "svelte-kit build",
 7 |     "package": "svelte-kit package",
 8 |     "publish": "npm run package && cd package && npm publish",
 9 |     "preview": "svelte-kit preview",
10 |     "prepare": "svelte-kit sync",
11 |     "check": "svelte-check --tsconfig ./tsconfig.json",
12 |     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
13 |   },
14 |   "devDependencies": {
15 |     "@sveltejs/adapter-auto": "next",
16 |     "@sveltejs/kit": "next",
17 |     "autoprefixer": "^10.4.7",
18 |     "flowbite": "^1.4.5",
19 |     "highlight.js": "^11.5.1",
20 |     "postcss": "^8.4.13",
21 |     "svelte": "^3.44.0",
22 |     "svelte-check": "^2.2.6",
23 |     "svelte-highlight": "^6.0.1",
24 |     "svelte-preprocess": "^4.10.1",
25 |     "svelte2tsx": "^0.5.9",
26 |     "tailwindcss": "^3.0.24",
27 |     "tslib": "^2.3.1",
28 |     "typescript": "~4.6.2"
29 |   },
30 |   "type": "module",
31 |   "dependencies": {
32 |     "@floating-ui/dom": "^0.5.0",
33 |     "classnames": "^2.3.1",
34 |     "svelte-icons": "npm:@edde746/svelte-icons@^0.1.6"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/lib/Breadcrumb/BreadcrumbItem.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { HiChevronRightOutline } from 'svelte-icons/hi';
 3 |   import type { SvelteComponent } from 'svelte';
 4 | 
 5 |   export let icon: typeof SvelteComponent | null = null;
 6 | </script>
 7 | 
 8 | <li class="group flex items-center" {...$$props}>
 9 |   <HiChevronRightOutline
10 |     aria-hidden="true"
11 |     class="mx-1 h-6 w-6 text-gray-400 group-first:hidden md:mx-2"
12 |     data-testid="breadcrumb-separator"
13 |   />
14 |   {#if $$props.href}
15 |     <a
16 |       class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
17 |       data-testid="breadcrumb-item"
18 |       href={$$props.href}
19 |     >
20 |       {#if icon}
21 |         <svelte:component this={icon} aria-hidden="true" class="mr-2 h-4 w-4" />
22 |       {/if}
23 |       <slot />
24 |     </a>
25 |   {:else}
26 |     <span class="flex items-center text-sm font-medium text-gray-400 dark:text-gray-500" data-testid="breadcrumb-item">
27 |       {#if icon}
28 |         <svelte:component this={icon} aria-hidden="true" class="mr-2 h-4 w-4" />
29 |       {/if}
30 |       <slot />
31 |     </span>
32 |   {/if}
33 | </li>
34 | 


--------------------------------------------------------------------------------
/static/images/spinners-dark.svg:
--------------------------------------------------------------------------------
1 | <svg width="198" height="50" viewBox="0 0 198 50" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <rect width="198" height="50" rx="8" fill="#374151"/>
3 |     <path d="M46 25C46 32.1797 40.1797 38 33 38C25.8203 38 20 32.1797 20 25C20 17.8203 25.8203 12 33 12C40.1797 12 46 17.8203 46 25ZM23.0331 25C23.0331 30.5046 27.4954 34.9669 33 34.9669C38.5046 34.9669 42.9669 30.5046 42.9669 25C42.9669 19.4954 38.5046 15.0331 33 15.0331C27.4954 15.0331 23.0331 19.4954 23.0331 25Z"
4 |           fill="#6B7280"/>
5 |     <path d="M44.0984 22.0846C44.913 21.8706 45.4083 21.0321 45.1004 20.2481C44.6644 19.1378 44.0767 18.0906 43.3523 17.1369C42.3197 15.7774 41.0295 14.6346 39.5552 13.7737C38.081 12.9129 36.4516 12.3509 34.7601 12.1197C33.5735 11.9576 32.3727 11.9605 31.1915 12.1264C30.3574 12.2436 29.8706 13.087 30.0846 13.9016C30.2986 14.7163 31.1332 15.1907 31.971 15.1035C32.7599 15.0215 33.5577 15.0339 34.3472 15.1418C35.6418 15.3187 36.8888 15.7489 38.0172 16.4078C39.1455 17.0666 40.1331 17.9413 40.9234 18.9818C41.4053 19.6163 41.8082 20.305 42.1245 21.0324C42.4604 21.8048 43.2837 22.2986 44.0984 22.0846Z"
6 |           fill="#3F83F8"/>
7 |     <rect x="58" y="17" width="120" height="16" rx="4" fill="white"/>
8 | </svg>
9 | 


--------------------------------------------------------------------------------
/static/images/spinners-light.svg:
--------------------------------------------------------------------------------
1 | <svg width="198" height="50" viewBox="0 0 198 50" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <rect width="198" height="50" rx="8" fill="#D1D5DB"/>
3 |     <path d="M46 25C46 32.1797 40.1797 38 33 38C25.8203 38 20 32.1797 20 25C20 17.8203 25.8203 12 33 12C40.1797 12 46 17.8203 46 25ZM23.0331 25C23.0331 30.5046 27.4954 34.9669 33 34.9669C38.5046 34.9669 42.9669 30.5046 42.9669 25C42.9669 19.4954 38.5046 15.0331 33 15.0331C27.4954 15.0331 23.0331 19.4954 23.0331 25Z"
4 |           fill="white"/>
5 |     <path d="M44.0984 22.0846C44.913 21.8706 45.4083 21.0321 45.1004 20.2481C44.6644 19.1378 44.0767 18.0906 43.3523 17.1369C42.3197 15.7774 41.0295 14.6346 39.5552 13.7737C38.081 12.9129 36.4516 12.3509 34.7601 12.1197C33.5735 11.9576 32.3727 11.9605 31.1915 12.1264C30.3574 12.2436 29.8706 13.087 30.0846 13.9016C30.2986 14.7163 31.1332 15.1907 31.971 15.1035C32.7599 15.0215 33.5577 15.0339 34.3472 15.1418C35.6418 15.3187 36.8888 15.7489 38.0172 16.4078C39.1455 17.0666 40.1331 17.9413 40.9234 18.9818C41.4053 19.6163 41.8082 20.305 42.1245 21.0324C42.4604 21.8048 43.2837 22.2986 44.0984 22.0846Z"
6 |           fill="#3F83F8"/>
7 |     <rect x="58" y="17" width="120" height="16" rx="4" fill="white"/>
8 | </svg>
9 | 


--------------------------------------------------------------------------------
/src/lib/Accordion/AccordionItem.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { getContext } from 'svelte';
 4 |   import { HiChevronDownOutline } from 'svelte-icons/hi';
 5 | 
 6 |   export let open: boolean = false;
 7 | 
 8 |   const flush = getContext<boolean>('flush');
 9 | </script>
10 | 
11 | <button
12 |   data-testid="accordion-title-element"
13 |   type="button"
14 |   class={classNames(
15 |     'flex w-full items-center justify-between first:rounded-t-lg last:rounded-b-lg',
16 |     'py-5 px-5 text-left font-medium text-gray-500 dark:text-gray-400',
17 |     {
18 |       'hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:bg-gray-800 dark:focus:ring-gray-800': !flush,
19 |       'text-gray-900 dark:text-white': open,
20 |       'bg-gray-100 dark:bg-gray-800': open && !flush,
21 |     }
22 |   )}
23 |   on:click={() => (open = !open)}
24 | >
25 |   <h2>
26 |     <slot name="title" />
27 |   </h2>
28 |   <HiChevronDownOutline className={classNames('h-6 w-6 shrink-0', { 'rotate-180': open })} />
29 | </button>
30 | 
31 | {#if open}
32 |   <div
33 |     {...$$props}
34 |     class={classNames('first:rounded-t-lg py-5 px-5 last:rounded-b-lg dark:bg-gray-900', $$props.class)}
35 |   >
36 |     <slot />
37 |   </div>
38 | {/if}
39 | 


--------------------------------------------------------------------------------
/static/images/sidebar-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="82" height="182" viewBox="0 0 82 182" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <rect x="0.251953" y="0.5" width="81.4961" height="181" rx="2" fill="#374151"/>
 3 |     <rect x="12.252" y="12.5" width="33" height="5" rx="1" fill="#9CA3AF"/>
 4 |     <rect x="12.252" y="33.5" width="5" height="5" rx="2.5" fill="#9CA3AF"/>
 5 |     <rect x="21.252" y="33.5" width="48.4961" height="5" rx="1" fill="#9CA3AF"/>
 6 |     <rect x="12.252" y="51.5" width="5" height="5" rx="2.5" fill="#9CA3AF"/>
 7 |     <rect x="21.252" y="51.5" width="48.4961" height="5" rx="1" fill="#9CA3AF"/>
 8 |     <rect x="12.252" y="69.5" width="5" height="5" rx="2.5" fill="#9CA3AF"/>
 9 |     <rect x="21.252" y="69.5" width="48.4961" height="5" rx="1" fill="#9CA3AF"/>
10 |     <rect x="12.252" y="87.5" width="5" height="5" rx="2.5" fill="#9CA3AF"/>
11 |     <rect x="21.252" y="87.5" width="48.4961" height="5" rx="1" fill="#9CA3AF"/>
12 |     <rect x="12.252" y="105.5" width="5" height="5" rx="2.5" fill="#9CA3AF"/>
13 |     <rect x="21.252" y="105.5" width="48.4961" height="5" rx="1" fill="#9CA3AF"/>
14 |     <rect x="21.5" y="164.5" width="5" height="5" rx="2.5" fill="#6B7280"/>
15 |     <rect x="38.5" y="164.5" width="5" height="5" rx="2.5" fill="#6B7280"/>
16 |     <rect x="55.5" y="164.5" width="5" height="5" rx="2.5" fill="#6B7280"/>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/src/lib/ListGroup/ListGroupItem.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import type { SvelteComponent } from 'svelte';
 4 | 
 5 |   export let href: string = '';
 6 |   export let icon: typeof SvelteComponent | null = null;
 7 |   export let active: boolean = false;
 8 | 
 9 |   $: className = classNames(
10 |     'flex w-full items-center cursor-pointer border-b border-gray-200 py-2 px-4 first:rounded-t-lg last:rounded-b-lg last:border-b-0 dark:border-gray-600',
11 |     {
12 |       'bg-blue-700 text-white dark:bg-gray-800': active,
13 |       'hover:bg-gray-100 hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:text-white dark:focus:ring-gray-500':
14 |         !active,
15 |     },
16 |     $$props.class
17 |   );
18 | </script>
19 | 
20 | {#if href}
21 |   <button class={classNames('text-left', className)} data-testid="list-group-item" type="button">
22 |     {#if icon}
23 |       <svelte:component this={icon} class="mr-2 h-4 w-4 fill-current" />
24 |     {/if}
25 |     <slot />
26 |   </button>
27 | {:else}
28 |   <a class={className} data-testid="list-group-item" {href}>
29 |     {#if icon}
30 |       <svelte:component this={icon} class="mr-2 h-4 w-4 fill-current" />
31 |     {/if}
32 |     <slot />
33 |   </a>
34 | {/if}
35 | 


--------------------------------------------------------------------------------
/static/images/sidebar-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="82" height="182" viewBox="0 0 82 182" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <rect x="0.501953" y="0.75" width="80.9961" height="180.5" rx="1.75" fill="#FAFAFA"/>
 3 |     <rect x="12.252" y="12.5" width="33" height="5" rx="1" fill="#9CA3AF"/>
 4 |     <rect x="12.252" y="33.5" width="5" height="5" rx="2.5" fill="#9CA3AF"/>
 5 |     <rect x="21.252" y="33.5" width="48.4961" height="5" rx="1" fill="#9CA3AF"/>
 6 |     <rect x="12.252" y="51.5" width="5" height="5" rx="2.5" fill="#9CA3AF"/>
 7 |     <rect x="21.252" y="51.5" width="48.4961" height="5" rx="1" fill="#9CA3AF"/>
 8 |     <rect x="12.252" y="69.5" width="5" height="5" rx="2.5" fill="#9CA3AF"/>
 9 |     <rect x="21.252" y="69.5" width="48.4961" height="5" rx="1" fill="#9CA3AF"/>
10 |     <rect x="12.252" y="87.5" width="5" height="5" rx="2.5" fill="#9CA3AF"/>
11 |     <rect x="21.252" y="87.5" width="48.4961" height="5" rx="1" fill="#9CA3AF"/>
12 |     <rect x="12.252" y="105.5" width="5" height="5" rx="2.5" fill="#9CA3AF"/>
13 |     <rect x="21.252" y="105.5" width="48.4961" height="5" rx="1" fill="#9CA3AF"/>
14 |     <rect x="21.5" y="164.5" width="5" height="5" rx="2.5" fill="#D1D5DB"/>
15 |     <rect x="38.5" y="164.5" width="5" height="5" rx="2.5" fill="#D1D5DB"/>
16 |     <rect x="55.5" y="164.5" width="5" height="5" rx="2.5" fill="#D1D5DB"/>
17 |     <rect x="0.501953" y="0.75" width="80.9961" height="180.5" rx="1.75" stroke="#E5E7EB" stroke-width="0.5"/>
18 | </svg>
19 | 


--------------------------------------------------------------------------------
/static/images/alerts-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="560" height="240" viewBox="0 0 560 240" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <rect x="10" y="11" width="539" height="59" rx="16" fill="#374151"/>
 3 |     <rect x="34" y="34.5" width="491" height="12" rx="2" fill="#1C64F2"/>
 4 |     <rect x="10" y="90" width="539" height="59" rx="16" fill="#374151"/>
 5 |     <rect x="34" y="113.5" width="258" height="12" rx="2" fill="#1C64F2"/>
 6 |     <path d="M503.964 126.512L517.988 112.488M517.988 126.512L503.964 112.488" stroke="#1C64F2" stroke-width="3"
 7 |           stroke-linecap="round" stroke-linejoin="round"/>
 8 |     <rect x="10" y="169" width="539" height="59" rx="16" fill="#374151"/>
 9 |     <path d="M47 202.5H46V198.5H45M46 194.5H46.01M55 198.5C55 199.682 54.7672 200.852 54.3149 201.944C53.8626 203.036 53.1997 204.028 52.364 204.864C51.5282 205.7 50.5361 206.363 49.4442 206.815C48.3522 207.267 47.1819 207.5 46 207.5C44.8181 207.5 43.6478 207.267 42.5558 206.815C41.4639 206.363 40.4718 205.7 39.636 204.864C38.8003 204.028 38.1374 203.036 37.6851 201.944C37.2328 200.852 37 199.682 37 198.5C37 196.113 37.9482 193.824 39.636 192.136C41.3239 190.448 43.6131 189.5 46 189.5C48.3869 189.5 50.6761 190.448 52.364 192.136C54.0518 193.824 55 196.113 55 198.5Z"
10 |           stroke="#1C64F2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
11 |     <rect x="74" y="192.5" width="258" height="12" rx="2" fill="#1C64F2"/>
12 |     <path d="M503.964 205.512L517.988 191.488M517.988 205.512L503.964 191.488" stroke="#1C64F2" stroke-width="3"
13 |           stroke-linecap="round" stroke-linejoin="round"/>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/static/images/alerts-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="560" height="240" viewBox="0 0 560 240" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <rect x="11" y="11" width="539" height="59" rx="16" fill="#EBF5FF"/>
 3 |     <rect x="35" y="34.5" width="491" height="12" rx="2" fill="#1A56DB"/>
 4 |     <rect x="11" y="90" width="539" height="59" rx="16" fill="#EBF5FF"/>
 5 |     <rect x="35" y="113.5" width="258" height="12" rx="2" fill="#1A56DB"/>
 6 |     <path d="M504.964 126.512L518.988 112.488M518.988 126.512L504.964 112.488" stroke="#1A56DB" stroke-width="3"
 7 |           stroke-linecap="round" stroke-linejoin="round"/>
 8 |     <rect x="11" y="169" width="539" height="59" rx="16" fill="#EBF5FF"/>
 9 |     <path d="M48 202.5H47V198.5H46M47 194.5H47.01M56 198.5C56 199.682 55.7672 200.852 55.3149 201.944C54.8626 203.036 54.1997 204.028 53.364 204.864C52.5282 205.7 51.5361 206.363 50.4442 206.815C49.3522 207.267 48.1819 207.5 47 207.5C45.8181 207.5 44.6478 207.267 43.5558 206.815C42.4639 206.363 41.4718 205.7 40.636 204.864C39.8003 204.028 39.1374 203.036 38.6851 201.944C38.2328 200.852 38 199.682 38 198.5C38 196.113 38.9482 193.824 40.636 192.136C42.3239 190.448 44.6131 189.5 47 189.5C49.3869 189.5 51.6761 190.448 53.364 192.136C55.0518 193.824 56 196.113 56 198.5Z"
10 |           stroke="#1A56DB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
11 |     <rect x="75" y="192.5" width="258" height="12" rx="2" fill="#1A56DB"/>
12 |     <path d="M504.964 205.512L518.988 191.488M518.988 205.512L504.964 191.488" stroke="#1A56DB" stroke-width="3"
13 |           stroke-linecap="round" stroke-linejoin="round"/>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/src/lib/Progress/Progress.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | 
 4 |   export let progress: number;
 5 |   export let color: 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' = 'blue';
 6 |   export let size: 'sm' | 'md' | 'lg' | 'xl' = 'md';
 7 |   export let label: string = '';
 8 |   export let labelPosition: 'inside' | 'outside' = 'inside';
 9 |   export let labelProgress: boolean = false;
10 | 
11 |   const colorClasses = {
12 |     dark: 'bg-gray-600 dark:bg-gray-300',
13 |     blue: 'bg-blue-600',
14 |     red: 'bg-red-600 dark:bg-red-500',
15 |     green: 'bg-green-600 dark:bg-green-500',
16 |     yellow: 'bg-yellow-400',
17 |     indigo: 'bg-indigo-600 dark:bg-indigo-500',
18 |     purple: 'bg-purple-600 dark:bg-purple-500',
19 |   };
20 |   const sizeClasses = {
21 |     sm: 'h-1.5',
22 |     md: 'h-2.5',
23 |     lg: 'h-4',
24 |     xl: 'h-6',
25 |   };
26 | </script>
27 | 
28 | <div>
29 |   {#if label && labelPosition === 'outside'}
30 |     <div class="mb-1 flex justify-between">
31 |       <span class="font-medium dark:text-white">{label}</span>
32 |       {#if labelProgress}
33 |         <span class="font-medium dark:text-white">{progress}%</span>
34 |       {/if}
35 |     </div>
36 |   {/if}
37 |   <div class={classNames('w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700', sizeClasses[size])}>
38 |     <div
39 |       class={classNames(
40 |         'flex items-center justify-center rounded-full text-center font-medium leading-none text-blue-100',
41 |         colorClasses[color],
42 |         sizeClasses[size],
43 |         $$props.class
44 |       )}
45 |       style={`width:${progress}%`}
46 |     >
47 |       {#if label && labelPosition === 'inside'}
48 |         {label}
49 |       {/if}
50 |     </div>
51 |   </div>
52 | </div>
53 | 


--------------------------------------------------------------------------------
/src/lib/Form/Textarea.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | 
 4 |   export let value: string = '';
 5 |   export let shadow: boolean = false;
 6 |   export let helperText: string = '';
 7 |   export let color: 'base' | 'green' | 'red' = 'base';
 8 | 
 9 |   const colorClasses = {
10 |     base: {
11 |       input:
12 |         'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
13 |       helperText: 'text-gray-500 dark:text-gray-400',
14 |     },
15 |     green: {
16 |       input:
17 |         'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
18 |       helperText: 'text-green-600 dark:text-green-500',
19 |     },
20 |     red: {
21 |       input:
22 |         'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500',
23 |       helperText: 'text-red-600 dark:text-red-500',
24 |     },
25 |   };
26 | </script>
27 | 
28 | <textarea
29 |   {...$$props}
30 |   bind:value
31 |   class={classNames(
32 |     'block w-full rounded-lg border disabled:cursor-not-allowed disabled:opacity-50',
33 |     colorClasses[color].input,
34 |     {
35 |       'shadow-sm dark:shadow-sm-light': shadow,
36 |     },
37 |     $$props.class
38 |   )}
39 | />
40 | 
41 | {#if helperText || $$slots.helper}
42 |   <div class={classNames('mt-1 text-sm', colorClasses[color].helperText)}>
43 |     <slot name="helper">
44 |       {helperText}
45 |     </slot>
46 |   </div>
47 | {/if}
48 | 


--------------------------------------------------------------------------------
/src/lib/Sidebar/SidebarCollapse.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { getContext, setContext, type SvelteComponent } from 'svelte';
 4 |   import { HiChevronDownOutline, HiMenuOutline } from 'svelte-icons/hi';
 5 |   import type { Writable } from 'svelte/store';
 6 |   import SidebarItemWrapper from './SidebarItemWrapper.svelte';
 7 | 
 8 |   export let open: boolean = false;
 9 |   export let icon: typeof SvelteComponent | null = HiMenuOutline;
10 |   export let label: string = '';
11 | 
12 |   setContext('insideCollapse', true);
13 |   const collapsed = getContext<Writable<boolean>>('collapsed');
14 | </script>
15 | 
16 | <SidebarItemWrapper>
17 |   <div slot="tooltip">
18 |     {label}
19 |   </div>
20 |   <button
21 |     {...$$props}
22 |     class="group flex w-full items-center rounded-lg p-2 text-base font-normal text-gray-900 transition duration-75 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
23 |     data-testid="sidebar-collapse-button"
24 |     on:click={() => (open = !open)}
25 |     type="button"
26 |   >
27 |     {#if icon}
28 |       <svelte:component
29 |         this={icon}
30 |         class={classNames(
31 |           'h-6 w-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white',
32 |           { 'text-gray-900': open }
33 |         )}
34 |       />
35 |     {/if}
36 |     {#if $collapsed === true}
37 |       <span class="sr-only">{label}</span>
38 |     {:else}
39 |       <span class="ml-3 flex-1 whitespace-nowrap text-left">{label}</span>
40 |       <HiChevronDownOutline class="h-5 w-5" />
41 |     {/if}
42 |   </button>
43 |   <ul
44 |     class={classNames('space-y-2 py-2', {
45 |       hidden: !open,
46 |     })}
47 |     data-testid="sidebar-collapse"
48 |   >
49 |     <slot />
50 |   </ul>
51 | </SidebarItemWrapper>
52 | 


--------------------------------------------------------------------------------
/src/routes/breadcrumb.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { Breadcrumb, BreadcrumbItem } from '$lib';
 3 | 
 4 |   import Card from '$lib/Card/Card.svelte';
 5 |   import { HiHomeSolid } from 'svelte-icons/hi';
 6 |   import { HighlightSvelte } from 'svelte-highlight';
 7 | </script>
 8 | 
 9 | <div class="mx-auto flex max-w-4xl flex-col gap-8 dark:text-white">
10 |   <div class="flex flex-col gap-2">
11 |     <span class="text-2xl font-bold">Default breadcrumb</span>
12 |     <Card>
13 |       <Breadcrumb aria-label="Default breadcrumb example">
14 |         <BreadcrumbItem href="#" icon={HiHomeSolid}>Home</BreadcrumbItem>
15 |         <BreadcrumbItem href="#">Projects</BreadcrumbItem>
16 |         <BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
17 |       </Breadcrumb>
18 |       <HighlightSvelte
19 |         code={`<Breadcrumb aria-label="Default breadcrumb example">
20 |   <BreadcrumbItem href="#" icon={HiHomeSolid}>Home</BreadcrumbItem>
21 |   <BreadcrumbItem href="#">Projects</BreadcrumbItem>
22 |   <BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
23 | </Breadcrumb>`}
24 |       />
25 |     </Card>
26 |   </div>
27 |   <div class="flex flex-col gap-2">
28 |     <span class="text-2xl font-bold">Solid background</span>
29 |     <Card>
30 |       <Breadcrumb aria-label="Solid background breadcrumb example" class="bg-gray-50 py-3 px-5 dark:bg-gray-900">
31 |         <BreadcrumbItem href="#" icon={HiHomeSolid}>Home</BreadcrumbItem>
32 |         <BreadcrumbItem href="#">Projects</BreadcrumbItem>
33 |         <BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
34 |       </Breadcrumb>
35 |       <HighlightSvelte
36 |         code={`<Breadcrumb aria-label="Solid background breadcrumb example" class="bg-gray-50 py-3 px-5 dark:bg-gray-900">
37 |   <BreadcrumbItem href="#" icon={HiHomeSolid}>Home</BreadcrumbItem>
38 |   <BreadcrumbItem href="#">Projects</BreadcrumbItem>
39 |   <BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
40 | </Breadcrumb>`}
41 |       />
42 |     </Card>
43 |   </div>
44 | </div>
45 | 


--------------------------------------------------------------------------------
/src/lib/Sidebar/SidebarItem.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import Badge from '../Badge/Badge.svelte';
 3 | 
 4 |   import classNames from 'classnames';
 5 |   import { getContext, type SvelteComponent } from 'svelte';
 6 |   import type { Writable } from 'svelte/store';
 7 |   import SidebarItemWrapper from './SidebarItemWrapper.svelte';
 8 | 
 9 |   export let active: boolean = false;
10 |   export let icon: typeof SvelteComponent | null = null;
11 |   export let label: string = '';
12 |   export let href: string = '';
13 |   export let labelColor: 'blue' | 'red' | 'green' | 'yellow' | 'gray' | 'indigo' | 'purple' | 'pink' = 'blue';
14 | 
15 |   const collapsed = getContext<Writable<boolean>>('collapsed');
16 | </script>
17 | 
18 | <SidebarItemWrapper>
19 |   <div slot="tooltip">
20 |     <slot />
21 |   </div>
22 |   <a
23 |     {...$$props}
24 |     on:click
25 |     {href}
26 |     class={classNames(
27 |       'flex items-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700',
28 |       {
29 |         'bg-gray-100 dark:bg-gray-700': active,
30 |         'group w-full pl-8 transition duration-75': !$collapsed && getContext('insideCollapse') === true,
31 |       },
32 |       $$props.class
33 |     )}
34 |   >
35 |     {#if icon}
36 |       <svelte:component
37 |         this={icon}
38 |         class={classNames(
39 |           'h-6 w-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white',
40 |           { 'text-gray-700 dark:text-gray-100': active }
41 |         )}
42 |       />
43 |     {/if}
44 |     {#if $collapsed !== true}
45 |       <span class="ml-3 flex-1 whitespace-nowrap" data-testid="sidebar-item-content">
46 |         <slot />
47 |       </span>
48 |     {/if}
49 |     {#if $collapsed !== true && label}
50 |       <Badge color={labelColor} data-testid="sidebar-item-label">
51 |         {label}
52 |       </Badge>
53 |     {/if}
54 |   </a>
55 | </SidebarItemWrapper>
56 | 


--------------------------------------------------------------------------------
/src/lib/Dropdown/Dropdown.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import Tooltip from '$lib/Tooltip/Tooltip.svelte';
 3 |   import Button from '$lib/Button/Button.svelte';
 4 |   import classNames from 'classnames';
 5 |   import {
 6 |     HiChevronUpOutline,
 7 |     HiChevronRightOutline,
 8 |     HiChevronDownOutline,
 9 |     HiChevronLeftOutline,
10 |   } from 'svelte-icons/hi';
11 |   import type { Placement } from '@floating-ui/dom';
12 | 
13 |   export let label: string = '';
14 |   export let inline: boolean = false;
15 |   export let tooltipArrow: boolean = false;
16 |   export let arrowIcon: boolean = true;
17 |   let placement: Placement;
18 |   $: placement = inline ? 'bottom-start' : 'bottom';
19 | 
20 |   const icons = {
21 |     top: HiChevronUpOutline,
22 |     right: HiChevronRightOutline,
23 |     bottom: HiChevronDownOutline,
24 |     left: HiChevronLeftOutline,
25 |   };
26 | 
27 |   // @ts-ignore
28 |   $: icon = icons[placement.split('-')[0]];
29 | </script>
30 | 
31 | <Tooltip
32 |   class={classNames('w-44 !rounded !p-0', $$props.class)}
33 |   style="auto"
34 |   animation="duration-100"
35 |   {placement}
36 |   arrow={tooltipArrow}
37 |   trigger="click"
38 | >
39 |   {#if inline}
40 |     <button class="flex items-center">
41 |       <slot name="label">{label}</slot>
42 |       {#if arrowIcon}
43 |         <svelte:component this={icon ?? HiChevronDownOutline} class="ml-2 h-4 w-4" />
44 |       {/if}
45 |     </button>
46 |   {:else}
47 |     <Button
48 |       pill={$$props.pill}
49 |       outline={$$props.outline}
50 |       color={$$props.color}
51 |       size={$$props.size}
52 |       icon={$$props.icon}
53 |       gradientDuoTone={$$props.gradientDuoTone}
54 |       gradientMonochrome={$$props.gradientMonochrome}
55 |     >
56 |       <slot name="label">{label}</slot>
57 |       {#if arrowIcon}
58 |         <svelte:component this={icon ?? HiChevronDownOutline} class="ml-2 h-4 w-4" />
59 |       {/if}
60 |     </Button>
61 |   {/if}
62 |   <div slot="content">
63 |     <ul class="py-1">
64 |       <slot />
65 |     </ul>
66 |   </div>
67 | </Tooltip>
68 | 


--------------------------------------------------------------------------------
/src/lib/Modal/Modal.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { createEventDispatcher, setContext } from 'svelte';
 4 |   const dispatch = createEventDispatcher();
 5 | 
 6 |   export let open = false;
 7 | 
 8 |   export let popup: boolean = false;
 9 |   export let size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' = '2xl';
10 |   export let placement: `${'top' | 'bottom'}-${'left' | 'center' | 'right'}` | `center${'' | '-left' | '-right'}` =
11 |     'center';
12 | 
13 |   // Issue if popup is changed after initialisation
14 |   setContext('modal', {
15 |     onClose: () => {
16 |       open = false;
17 |       dispatch('close');
18 |     },
19 |     popup,
20 |   });
21 | 
22 |   const sizeClasses = {
23 |     sm: 'max-w-sm',
24 |     md: 'max-w-md',
25 |     lg: 'max-w-lg',
26 |     xl: 'max-w-xl',
27 |     '2xl': 'max-w-2xl',
28 |     '3xl': 'max-w-3xl',
29 |     '4xl': 'max-w-4xl',
30 |     '5xl': 'max-w-5xl',
31 |     '6xl': 'max-w-6xl',
32 |     '7xl': 'max-w-7xl',
33 |   };
34 | 
35 |   const placementClasses = {
36 |     'top-left': 'items-start justify-start',
37 |     'top-center': 'items-start justify-center',
38 |     'top-right': 'items-start justify-end',
39 |     'center-left': 'items-center justify-start',
40 |     center: 'items-center justify-center',
41 |     'center-right': 'items-center justify-end',
42 |     'bottom-right': 'items-end justify-end',
43 |     'bottom-center': 'items-end justify-center',
44 |     'bottom-left': 'items-end justify-start',
45 |   };
46 | </script>
47 | 
48 | <div
49 |   class={classNames(
50 |     'fixed top-0 right-0 left-0 z-50 h-modal overflow-y-auto overflow-x-hidden md:inset-0 md:h-full',
51 |     placementClasses[placement],
52 |     {
53 |       'flex bg-gray-900 bg-opacity-50 dark:bg-opacity-80': open,
54 |       hidden: !open,
55 |     }
56 |   )}
57 |   aria-hidden={!open}
58 | >
59 |   <div class={classNames('relative h-full w-full p-4 md:h-auto', sizeClasses[size])}>
60 |     <div class="relative rounded-lg bg-white shadow dark:bg-gray-700">
61 |       <slot />
62 |     </div>
63 |   </div>
64 | </div>
65 | 


--------------------------------------------------------------------------------
/src/routes/__layout.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import '../app.css';
 3 |   import { Navbar, Sidebar, SidebarItem, SidebarItems, SidebarItemGroup } from '$lib';
 4 |   import { HiMenuAlt1Outline } from 'svelte-icons/hi';
 5 |   import categories from '../categories';
 6 |   import highlightStyle from 'svelte-highlight/styles/github-dark-dimmed';
 7 |   import { FaGithub } from 'svelte-icons/fa';
 8 | 
 9 |   let collapsed = false;
10 | </script>
11 | 
12 | <svelte:head>
13 |   {@html highlightStyle}
14 |   <title>Flowbite Svelte Components</title>
15 | </svelte:head>
16 | 
17 | <div class="flex h-screen w-full flex-col overflow-hidden">
18 |   <Navbar class="border-b" fluid>
19 |     <div class="flex items-center">
20 |       <button on:click={() => (collapsed = !collapsed)}>
21 |         <HiMenuAlt1Outline class="mr-6 h-6 w-6 cursor-pointer text-gray-600 dark:text-gray-400" />
22 |       </button>
23 |       <span class="text-xl font-semibold dark:text-white">Flowbite Svelte Components</span>
24 |     </div>
25 |     <div class="flex items-center gap-2">
26 |       <a
27 |         class="cursor-pointer rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
28 |         href="https://github.com/edde746/flowbite-svelte-but-better"
29 |         title="Github Repository"
30 |         target="_blank"
31 |         rel="noreferrer"
32 |       >
33 |         <!-- <BsGithub class="h-5 w-5" /> -->
34 |         <FaGithub class="h-5 w-5 text-black dark:text-white" />
35 |       </a>
36 |     </div>
37 |   </Navbar>
38 |   <div class="flex h-full overflow-hidden bg-gray-50 dark:bg-gray-900">
39 |     <Sidebar {collapsed}>
40 |       <SidebarItems>
41 |         <SidebarItemGroup>
42 |           {#each categories as { href, icon, title }}
43 |             <SidebarItem {icon} {href}>
44 |               {title}
45 |             </SidebarItem>
46 |           {/each}
47 |         </SidebarItemGroup>
48 |       </SidebarItems>
49 |     </Sidebar>
50 |     <main class="flex-1 overflow-auto p-4">
51 |       <slot />
52 |     </main>
53 |   </div>
54 | </div>
55 | 


--------------------------------------------------------------------------------
/static/images/carousel-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="268" height="134" viewBox="0 0 268 134" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <rect x="0.5" width="267" height="134" rx="8" fill="#D1D5DB"/>
 3 |     <circle cx="20.5" cy="67" r="8" fill="#F9FAFB"/>
 4 |     <path d="M21.25 69.9168L18.3334 67.0002L21.25 64.0835" stroke="#6B7280" stroke-linecap="round"
 5 |           stroke-linejoin="round"/>
 6 |     <circle cx="248" cy="66.5" r="8" fill="#F9FAFB"/>
 7 |     <path d="M246.75 63.5835L249.667 66.5002L246.75 69.4168" stroke="#6B7280" stroke-linecap="round"
 8 |           stroke-linejoin="round"/>
 9 |     <path d="M118 118C118 119.105 117.105 120 116 120C114.895 120 114 119.105 114 118C114 116.895 114.895 116 116 116C117.105 116 118 116.895 118 118Z"
10 |           fill="white"/>
11 |     <path d="M127 118C127 119.105 126.105 120 125 120C123.895 120 123 119.105 123 118C123 116.895 123.895 116 125 116C126.105 116 127 116.895 127 118Z"
12 |           fill="white"/>
13 |     <path d="M136 118C136 119.105 135.105 120 134 120C132.895 120 132 119.105 132 118C132 116.895 132.895 116 134 116C135.105 116 136 116.895 136 118Z"
14 |           fill="white"/>
15 |     <path d="M145 118C145 119.105 144.105 120 143 120C141.895 120 141 119.105 141 118C141 116.895 141.895 116 143 116C144.105 116 145 116.895 145 118Z"
16 |           fill="white"/>
17 |     <path d="M154 118C154 119.105 153.105 120 152 120C150.895 120 150 119.105 150 118C150 116.895 150.895 116 152 116C153.105 116 154 116.895 154 118Z"
18 |           fill="white"/>
19 |     <path fill-rule="evenodd" clip-rule="evenodd"
20 |           d="M144.844 59.1759C146.868 59.1759 148.509 57.4576 148.509 55.3379C148.509 53.2183 146.868 51.5 144.844 51.5C142.82 51.5 141.179 53.2183 141.179 55.3379C141.179 57.4576 142.82 59.1759 144.844 59.1759ZM134.7 82.4164H112.545C111.767 82.4164 111.287 81.5685 111.687 80.902L126.803 55.7033C127.185 55.0658 128.101 55.049 128.5 55.6764C130.458 58.7568 135.383 66.5179 139.573 73.2128L144.117 65.5924C144.485 64.9759 145.348 64.9557 145.757 65.554L156.22 80.8333C156.678 81.5033 156.232 82.4206 155.443 82.4286L145.29 82.5323L134.7 82.4164Z"
21 |           fill="#9CA3AF"/>
22 | </svg>
23 | 


--------------------------------------------------------------------------------
/static/images/carousel-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="268" height="134" viewBox="0 0 268 134" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <rect x="0.5" width="267" height="134" rx="8" fill="#374151"/>
 3 |     <circle cx="20.5" cy="67" r="8" fill="#6B7280"/>
 4 |     <path d="M21.25 69.9168L18.3334 67.0002L21.25 64.0835" stroke="white" stroke-linecap="round"
 5 |           stroke-linejoin="round"/>
 6 |     <circle cx="248" cy="66.5" r="8" fill="#6B7280"/>
 7 |     <path d="M246.75 63.5835L249.667 66.5002L246.75 69.4168" stroke="white" stroke-linecap="round"
 8 |           stroke-linejoin="round"/>
 9 |     <path d="M118 118C118 119.105 117.105 120 116 120C114.895 120 114 119.105 114 118C114 116.895 114.895 116 116 116C117.105 116 118 116.895 118 118Z"
10 |           fill="#6B7280"/>
11 |     <path d="M127 118C127 119.105 126.105 120 125 120C123.895 120 123 119.105 123 118C123 116.895 123.895 116 125 116C126.105 116 127 116.895 127 118Z"
12 |           fill="#6B7280"/>
13 |     <path d="M136 118C136 119.105 135.105 120 134 120C132.895 120 132 119.105 132 118C132 116.895 132.895 116 134 116C135.105 116 136 116.895 136 118Z"
14 |           fill="#6B7280"/>
15 |     <path d="M145 118C145 119.105 144.105 120 143 120C141.895 120 141 119.105 141 118C141 116.895 141.895 116 143 116C144.105 116 145 116.895 145 118Z"
16 |           fill="#6B7280"/>
17 |     <path d="M154 118C154 119.105 153.105 120 152 120C150.895 120 150 119.105 150 118C150 116.895 150.895 116 152 116C153.105 116 154 116.895 154 118Z"
18 |           fill="#6B7280"/>
19 |     <path fill-rule="evenodd" clip-rule="evenodd"
20 |           d="M144.844 59.1759C146.868 59.1759 148.509 57.4576 148.509 55.3379C148.509 53.2183 146.868 51.5 144.844 51.5C142.82 51.5 141.179 53.2183 141.179 55.3379C141.179 57.4576 142.82 59.1759 144.844 59.1759ZM134.7 82.4164H112.545C111.767 82.4164 111.287 81.5685 111.687 80.902L126.803 55.7033C127.185 55.0658 128.101 55.049 128.5 55.6764C130.458 58.7568 135.383 66.5179 139.573 73.2128L144.117 65.5924C144.485 64.9759 145.348 64.9557 145.757 65.554L156.22 80.8333C156.678 81.5033 156.232 82.4206 155.443 82.4286L145.29 82.5323L134.7 82.4164Z"
21 |           fill="#4B5563"/>
22 | </svg>
23 | 


--------------------------------------------------------------------------------
/static/images/timeline-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="144" height="223" viewBox="0 0 144 223" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect x="3.2666" y="0.825439" width="2" height="221.59" rx="1" fill="#374151"/>
 3 | <path d="M7.7666 27.3301C7.7666 29.1836 6.21387 30.7117 4.2666 30.7117C2.31934 30.7117 0.766602 29.1836 0.766602 27.3301C0.766602 25.4765 2.31934 23.9485 4.2666 23.9485C6.21387 23.9485 7.7666 25.4765 7.7666 27.3301Z" fill="#374151" stroke="#111827"/>
 4 | <path d="M7.7666 106.903C7.7666 108.756 6.21387 110.284 4.2666 110.284C2.31934 110.284 0.766602 108.756 0.766602 106.903C0.766602 105.049 2.31934 103.521 4.2666 103.521C6.21387 103.521 7.7666 105.049 7.7666 106.903Z" fill="#374151" stroke="#111827"/>
 5 | <path d="M7.7666 186.476C7.7666 188.329 6.21387 189.857 4.2666 189.857C2.31934 189.857 0.766602 188.329 0.766602 186.476C0.766602 184.622 2.31934 183.094 4.2666 183.094C6.21387 183.094 7.7666 184.622 7.7666 186.476Z" fill="#374151" stroke="#111827"/>
 6 | <rect x="17.1769" y="25.3237" width="71.7043" height="4" rx="2" fill="#D1D5DB"/>
 7 | <rect x="17.1769" y="32.5845" width="46.2609" height="3" rx="1.5" fill="#6B7280"/>
 8 | <rect x="17.1769" y="41.5063" width="126.556" height="3" rx="1.5" fill="#6B7280"/>
 9 | <rect x="17.1769" y="47.5063" width="121.93" height="3" rx="1.5" fill="#6B7280"/>
10 | <rect x="17.1769" y="53.5063" width="102.104" height="3" rx="1.5" fill="#6B7280"/>
11 | <rect x="17.177" y="105.219" width="71.7043" height="4" rx="2" fill="#D1D5DB"/>
12 | <rect x="17.177" y="112.479" width="46.2609" height="3" rx="1.5" fill="#6B7280"/>
13 | <rect x="17.177" y="121.401" width="126.556" height="3" rx="1.5" fill="#6B7280"/>
14 | <rect x="17.177" y="127.401" width="121.93" height="3" rx="1.5" fill="#6B7280"/>
15 | <rect x="17.177" y="133.401" width="102.104" height="3" rx="1.5" fill="#6B7280"/>
16 | <rect x="17.043" y="184.233" width="71.7043" height="4" rx="2" fill="#D1D5DB"/>
17 | <rect x="17.043" y="191.494" width="46.2609" height="3" rx="1.5" fill="#6B7280"/>
18 | <rect x="17.043" y="200.416" width="126.556" height="3" rx="1.5" fill="#6B7280"/>
19 | <rect x="17.043" y="206.416" width="121.93" height="3" rx="1.5" fill="#6B7280"/>
20 | </svg>


--------------------------------------------------------------------------------
/static/images/timeline-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="144" height="222" viewBox="0 0 144 222" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect x="3.7666" y="0.705078" width="1" height="220.59" rx="0.5" fill="#D1D5DB" stroke="#D1D5DB"/>
 3 | <path d="M7.7666 26.7097C7.7666 28.5633 6.21387 30.0913 4.2666 30.0913C2.31934 30.0913 0.766602 28.5633 0.766602 26.7097C0.766602 24.8562 2.31934 23.3281 4.2666 23.3281C6.21387 23.3281 7.7666 24.8562 7.7666 26.7097Z" fill="#D1D5DB" stroke="white"/>
 4 | <path d="M7.7666 106.282C7.7666 108.136 6.21387 109.664 4.2666 109.664C2.31934 109.664 0.766602 108.136 0.766602 106.282C0.766602 104.429 2.31934 102.901 4.2666 102.901C6.21387 102.901 7.7666 104.429 7.7666 106.282Z" fill="#D1D5DB" stroke="white"/>
 5 | <path d="M7.7666 185.855C7.7666 187.709 6.21387 189.237 4.2666 189.237C2.31934 189.237 0.766602 187.709 0.766602 185.855C0.766602 184.002 2.31934 182.474 4.2666 182.474C6.21387 182.474 7.7666 184.002 7.7666 185.855Z" fill="#D1D5DB" stroke="white"/>
 6 | <rect x="17.1769" y="24.7034" width="71.7043" height="4" rx="2" fill="#9CA3AF"/>
 7 | <rect x="17.1769" y="31.9644" width="46.2609" height="3" rx="1.5" fill="#D1D5DB"/>
 8 | <rect x="17.1769" y="40.886" width="126.556" height="3" rx="1.5" fill="#D1D5DB"/>
 9 | <rect x="17.1769" y="46.886" width="121.93" height="3" rx="1.5" fill="#D1D5DB"/>
10 | <rect x="17.1769" y="52.886" width="102.104" height="3" rx="1.5" fill="#D1D5DB"/>
11 | <rect x="17.177" y="104.598" width="71.7043" height="4" rx="2" fill="#9CA3AF"/>
12 | <rect x="17.177" y="111.859" width="46.2609" height="3" rx="1.5" fill="#D1D5DB"/>
13 | <rect x="17.177" y="120.781" width="126.556" height="3" rx="1.5" fill="#D1D5DB"/>
14 | <rect x="17.177" y="126.781" width="121.93" height="3" rx="1.5" fill="#D1D5DB"/>
15 | <rect x="17.177" y="132.781" width="102.104" height="3" rx="1.5" fill="#D1D5DB"/>
16 | <rect x="17.043" y="183.612" width="71.7043" height="4" rx="2" fill="#9CA3AF"/>
17 | <rect x="17.043" y="190.873" width="46.2609" height="3" rx="1.5" fill="#D1D5DB"/>
18 | <rect x="17.043" y="199.795" width="126.556" height="3" rx="1.5" fill="#D1D5DB"/>
19 | <rect x="17.043" y="205.795" width="121.93" height="3" rx="1.5" fill="#D1D5DB"/>
20 | </svg>


--------------------------------------------------------------------------------
/src/lib/Badge/Badge.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import type { SvelteComponent } from 'svelte';
 3 |   import classNames from 'classnames';
 4 | 
 5 |   export let color: 'blue' | 'red' | 'green' | 'yellow' | 'gray' | 'indigo' | 'purple' | 'pink' = 'blue';
 6 |   export let size: 'xs' | 'sm' = 'xs';
 7 |   export let icon: typeof SvelteComponent | null = null;
 8 | 
 9 |   const colorClasses = {
10 |     blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800 group-hover:bg-blue-200 dark:group-hover:bg-blue-300',
11 |     gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 group-hover:bg-gray-200 dark:group-hover:bg-gray-600',
12 |     red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300',
13 |     green:
14 |       'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300',
15 |     yellow:
16 |       'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300',
17 |     indigo:
18 |       'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-300',
19 |     purple:
20 |       'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300',
21 |     pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300',
22 |   };
23 | 
24 |   const sizeClasses = {
25 |     xs: 'text-xs',
26 |     sm: 'text-sm',
27 |   };
28 | 
29 |   const iconSizeClasses = {
30 |     xs: 'w-3 h-3',
31 |     sm: 'w-3.5 h-3.5',
32 |   };
33 | </script>
34 | 
35 | <span
36 |   class={classNames('flex h-fit items-center gap-1 font-semibold', colorClasses[color], sizeClasses[size], {
37 |     'rounded px-2 py-0.5': !!$$slots.default,
38 |     'rounded-full p-1': !$$slots.default && size === 'xs',
39 |     'rounded-full p-1.5': !$$slots.default && size === 'sm',
40 |   })}
41 | >
42 |   {#if icon}
43 |     <svelte:component this={icon} class={classNames(iconSizeClasses[size])} />
44 |   {/if}
45 |   <slot />
46 | </span>
47 | 


--------------------------------------------------------------------------------
/src/routes/index.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { HiExternalLinkSolid } from 'svelte-icons/hi';
 4 |   import categories from '../categories';
 5 | 
 6 |   const getImageUrl = (name: string | undefined) => `/images/${name}`;
 7 | </script>
 8 | 
 9 | <div class="mx-auto max-w-screen-xl p-4 lg:p-12 lg:text-center">
10 |   <h2
11 |     class="mb-4 text-2xl font-bold text-gray-900 dark:text-white lg:text-center lg:text-4xl lg:font-extrabold lg:leading-snug 2xl:px-48"
12 |   >
13 |     Tailwind CSS Components
14 |   </h2>
15 |   <p class="mb-10 text-lg font-normal text-gray-500 dark:text-gray-400 lg:mb-16 lg:text-center lg:text-xl xl:px-64">
16 |     Explore the whole collection of open-source web components and interactive elements built with the utility classes
17 |     from Tailwind CSS
18 |   </p>
19 |   <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
20 |     {#each categories as { title, href, card }}
21 |       {#if card}
22 |         <a
23 |           class="h-64 rounded-xl border border-gray-100 bg-white shadow transition hover:border-white hover:shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-800 dark:hover:border-gray-600"
24 |           {href}
25 |         >
26 |           <div
27 |             class="flex items-center justify-between rounded-t-lg border-b border-gray-200 bg-gray-50 py-2.5 px-5 dark:border-gray-700 dark:bg-gray-700"
28 |           >
29 |             <span class="text-lg font-medium text-gray-500 dark:text-gray-400">{title}</span>
30 |             <HiExternalLinkSolid class="h-5 w-5 text-gray-900 dark:text-white" />
31 |           </div>
32 |           <div class="flex h-52 items-center justify-center">
33 |             <img
34 |               class={classNames(card?.className, 'dark:hidden')}
35 |               src={getImageUrl(card?.images.light)}
36 |               alt="Alerts"
37 |             />
38 |             <img
39 |               class={classNames(card?.className, 'hidden dark:block')}
40 |               src={getImageUrl(card?.images.dark)}
41 |               alt="Alerts"
42 |             />
43 |           </div>
44 |         </a>
45 |       {/if}
46 |     {/each}
47 |   </div>
48 | </div>
49 | 


--------------------------------------------------------------------------------
/src/routes/pagination.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { Pagination } from '$lib';
 3 | 
 4 |   import Card from '$lib/Card/Card.svelte';
 5 |   import { HiHomeSolid } from 'svelte-icons/hi';
 6 |   import { HighlightSvelte } from 'svelte-highlight';
 7 | </script>
 8 | 
 9 | <div class="mx-auto flex max-w-4xl flex-col gap-8 dark:text-white">
10 |   <div class="flex flex-col gap-2">
11 |     <span class="text-2xl font-bold">Default pagination</span>
12 |     <Card>
13 |       <Pagination currentPage={1} totalPages={100} />
14 |       <HighlightSvelte
15 |         code={`<Pagination currentPage={1} totalPages={100} />
16 | <!-- bind to get values -->`}
17 |       />
18 |     </Card>
19 |   </div>
20 |   <div class="flex flex-col gap-2">
21 |     <span class="text-2xl font-bold">Pagination with icons </span>
22 |     <Card>
23 |       <Pagination currentPage={1} showIcons={true} totalPages={100} />
24 |       <HighlightSvelte code={`<Pagination currentPage={1} showIcons={true} totalPages={100} />`} />
25 |     </Card>
26 |   </div>
27 |   <div class="flex flex-col gap-2">
28 |     <span class="text-2xl font-bold">Previous and next </span>
29 |     <Card>
30 |       <Pagination currentPage={1} layout="navigation" totalPages={100} />
31 |       <HighlightSvelte code={`<Pagination currentPage={1} layout="navigation" totalPages={100} />`} />
32 |     </Card>
33 |   </div>
34 |   <div class="flex flex-col gap-2">
35 |     <span class="text-2xl font-bold">Previous and next with icons </span>
36 |     <Card>
37 |       <Pagination currentPage={1} layout="navigation" totalPages={100} showIcons={true} />
38 |       <HighlightSvelte code={`<Pagination currentPage={1} layout="navigation" totalPages={100} showIcons={true} />`} />
39 |     </Card>
40 |   </div>
41 |   <div class="flex flex-col gap-2">
42 |     <span class="text-2xl font-bold">Table data navigation </span>
43 |     <Card>
44 |       <div class="flex items-center justify-center text-center">
45 |         <Pagination currentPage={1} layout="table" totalPages={1000} />
46 |       </div>
47 |       <HighlightSvelte
48 |         code={`<div class="flex items-center justify-center text-center">
49 |   <Pagination currentPage={1} layout="table"  totalPages={1000} />
50 | </div>`}
51 |       />
52 |     </Card>
53 |   </div>
54 | </div>
55 | 


--------------------------------------------------------------------------------
/src/lib/Spinner/Spinner.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | 
 4 |   export let color: 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' = 'blue';
 5 |   export let light: boolean = false;
 6 |   export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
 7 | 
 8 |   const sizeClasses = {
 9 |     xs: 'w-3 h-3',
10 |     sm: 'w-4 h-4',
11 |     md: 'w-6 h-6',
12 |     lg: 'w-8 h-8',
13 |     xl: 'w-10 h-10',
14 |   };
15 | 
16 |   const colorClasses = {
17 |     blue: 'fill-blue-600',
18 |     gray: classNames('fill-gray-600', { 'dark:fill-gray-300': !light }),
19 |     green: classNames('fill-green-500', { 'dark:text-gray-600': !light }),
20 |     red: 'fill-red-600',
21 |     yellow: classNames('fill-yellow-400', { 'dark:text-gray-600': !light }),
22 |     pink: 'fill-pink-600',
23 |     purple: 'fill-purple-600',
24 |   };
25 | </script>
26 | 
27 | <span role="status" {...$$props} class="">
28 |   <svg
29 |     class={classNames(
30 |       'inline animate-spin text-gray-200',
31 |       { 'dark:text-gray-600': !light },
32 |       colorClasses[color],
33 |       sizeClasses[size],
34 |       $$props.class
35 |     )}
36 |     fill="none"
37 |     viewBox="0 0 100 101"
38 |   >
39 |     <path
40 |       d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
41 |       fill="currentColor"
42 |     />
43 |     <path
44 |       d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
45 |       fill="currentFill"
46 |     />
47 |   </svg>
48 | </span>
49 | 


--------------------------------------------------------------------------------
/src/lib/Avatar/Avatar.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 | 
 4 |   export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
 5 |   export let rounded: boolean = false;
 6 |   export let bordered: boolean = false;
 7 |   export let img: string = '';
 8 |   export let status: 'offline' | 'online' | 'away' | 'busy' | null = null;
 9 |   export let statusPosition: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left' = 'top-right';
10 |   export let stacked: boolean = false;
11 | 
12 |   const sizeClasses = {
13 |     xs: 'w-6 h-6',
14 |     sm: 'w-8 h-8',
15 |     md: 'w-10 h-10',
16 |     lg: 'w-20 h-20',
17 |     xl: 'w-36 h-36',
18 |   };
19 | 
20 |   const statusClasses = {
21 |     offline: 'bg-gray-400',
22 |     online: 'bg-green-400',
23 |     away: 'bg-yellow-400',
24 |     busy: 'bg-red-400',
25 |   };
26 | 
27 |   const statusPositionClasses = {
28 |     'top-left': '-top-1 -right-1',
29 |     'top-right': '-top-1 -left-1',
30 |     'bottom-left': '-bottom-1 -right-1',
31 |     'bottom-right': '-bottom-1 -left-1',
32 |   };
33 | </script>
34 | 
35 | <div class="flex items-center space-x-4">
36 |   <div class="relative">
37 |     {#if img}
38 |       <img
39 |         class={classNames(sizeClasses[size], {
40 |           rounded: !rounded,
41 |           'rounded-full': rounded,
42 |           'ring-2 ring-gray-300 dark:ring-gray-500': bordered || stacked,
43 |           'p-1': bordered,
44 |         })}
45 |         src={img}
46 |         alt={$$props.alt}
47 |       />
48 |     {:else}
49 |       <div
50 |         class={classNames(`relative overflow-hidden bg-gray-100 dark:bg-gray-600`, sizeClasses[size], {
51 |           rounded: !rounded,
52 |           'rounded-full': rounded,
53 |           'ring-2 ring-gray-300 dark:ring-gray-500': bordered || stacked,
54 |           'p-1': bordered,
55 |         })}
56 |       >
57 |         <svg
58 |           class="absolute -bottom-1 h-auto w-auto text-gray-400"
59 |           fill="currentColor"
60 |           viewBox="0 0 20 20"
61 |           xmlns="http://www.w3.org/2000/svg"
62 |         >
63 |           <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
64 |         </svg>
65 |       </div>
66 |     {/if}
67 |     {#if status}
68 |       <span
69 |         class={classNames(
70 |           'absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800',
71 |           statusClasses[status],
72 |           statusPositionClasses[statusPosition]
73 |         )}
74 |       />
75 |     {/if}
76 |   </div>
77 |   <slot />
78 | </div>
79 | 


--------------------------------------------------------------------------------
/static/images/list-group-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="280" height="220" viewBox="0 0 280 220" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <g filter="url(#filter0_dd_2159_3076)">
 3 |         <rect x="10" y="12" width="260" height="196" rx="8" fill="#374151"/>
 4 |         <circle cx="39.5719" cy="36.4281" r="6.50942" fill="#374151" stroke="#6B7280" stroke-width="3"/>
 5 |         <rect x="64" y="31.5" width="182" height="10" rx="4" fill="#9CA3AF"/>
 6 |         <line x1="10" y1="60.5" x2="270" y2="60.5" stroke="#4B5563"/>
 7 |         <circle cx="39.5719" cy="85.4281" r="6.50942" fill="#374151" stroke="#6B7280" stroke-width="3"/>
 8 |         <rect x="64" y="80.5" width="182" height="10" rx="4" fill="#9CA3AF"/>
 9 |         <line x1="10" y1="109.5" x2="270" y2="109.5" stroke="#4B5563"/>
10 |         <circle cx="39.5719" cy="134.428" r="6.50942" fill="#374151" stroke="#6B7280" stroke-width="3"/>
11 |         <rect x="64" y="129.5" width="182" height="10" rx="4" fill="#9CA3AF"/>
12 |         <line x1="10" y1="158.5" x2="270" y2="158.5" stroke="#4B5563"/>
13 |         <circle cx="39.5719" cy="183.428" r="6.50942" fill="#374151" stroke="#6B7280" stroke-width="3"/>
14 |         <rect x="64" y="178.5" width="182" height="10" rx="4" fill="#9CA3AF"/>
15 |         <rect x="10.5" y="12.5" width="259" height="195" rx="7.5" stroke="#4B5563"/>
16 |     </g>
17 |     <defs>
18 |         <filter id="filter0_dd_2159_3076" x="4" y="10" width="272" height="208" filterUnits="userSpaceOnUse"
19 |                 color-interpolation-filters="sRGB">
20 |             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
21 |             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
22 |                            result="hardAlpha"/>
23 |             <feOffset dy="4"/>
24 |             <feGaussianBlur stdDeviation="3"/>
25 |             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
26 |             <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2159_3076"/>
27 |             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
28 |                            result="hardAlpha"/>
29 |             <feOffset dy="2"/>
30 |             <feGaussianBlur stdDeviation="2"/>
31 |             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
32 |             <feBlend mode="normal" in2="effect1_dropShadow_2159_3076" result="effect2_dropShadow_2159_3076"/>
33 |             <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2159_3076" result="shape"/>
34 |         </filter>
35 |     </defs>
36 | </svg>
37 | 


--------------------------------------------------------------------------------
/static/images/tables-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="410" height="240" viewBox="0 0 410 240" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g filter="url(#filter0_dd_2159_2977)">
 3 | <rect x="12" y="15" width="386" height="210" rx="8" fill="#374151"/>
 4 | <rect width="386" height="42" transform="translate(12 15)" fill="#4B5563"/>
 5 | <rect x="33" y="31" width="50" height="10" rx="2" fill="#9CA3AF"/>
 6 | <rect x="178.5" y="31" width="50" height="10" rx="2" fill="#9CA3AF"/>
 7 | <rect x="324" y="31" width="50" height="10" rx="2" fill="#9CA3AF"/>
 8 | <line x1="12" y1="56.5" x2="398" y2="56.5" stroke="#4B5563"/>
 9 | <rect x="33" y="73" width="50" height="10" rx="2" fill="#6B7280"/>
10 | <rect x="178.5" y="73" width="50" height="10" rx="2" fill="#6B7280"/>
11 | <rect x="324" y="73" width="50" height="10" rx="2" fill="#1C64F2"/>
12 | <line x1="12" y1="98.5" x2="398" y2="98.5" stroke="#4B5563"/>
13 | <rect x="33" y="115" width="50" height="10" rx="2" fill="#6B7280"/>
14 | <rect x="178.5" y="115" width="50" height="10" rx="2" fill="#6B7280"/>
15 | <rect x="324" y="115" width="50" height="10" rx="2" fill="#1C64F2"/>
16 | <line x1="12" y1="140.5" x2="398" y2="140.5" stroke="#4B5563"/>
17 | <rect x="33" y="157" width="50" height="10" rx="2" fill="#6B7280"/>
18 | <rect x="178.5" y="157" width="50" height="10" rx="2" fill="#6B7280"/>
19 | <rect x="324" y="157" width="50" height="10" rx="2" fill="#1C64F2"/>
20 | <line x1="12" y1="182.5" x2="398" y2="182.5" stroke="#4B5563"/>
21 | <rect x="33" y="199" width="50" height="10" rx="2" fill="#6B7280"/>
22 | <rect x="178.5" y="199" width="50" height="10" rx="2" fill="#6B7280"/>
23 | <rect x="324" y="199" width="50" height="10" rx="2" fill="#1C64F2"/>
24 | <rect x="12.5" y="15.5" width="385" height="209" rx="7.5" stroke="#4B5563"/>
25 | </g>
26 | <defs>
27 | <filter id="filter0_dd_2159_2977" x="6" y="13" width="398" height="222" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
28 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
29 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
30 | <feOffset dy="4"/>
31 | <feGaussianBlur stdDeviation="3"/>
32 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
33 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2159_2977"/>
34 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
35 | <feOffset dy="2"/>
36 | <feGaussianBlur stdDeviation="2"/>
37 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
38 | <feBlend mode="normal" in2="effect1_dropShadow_2159_2977" result="effect2_dropShadow_2159_2977"/>
39 | <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2159_2977" result="shape"/>
40 | </filter>
41 | </defs>
42 | </svg>
43 | 


--------------------------------------------------------------------------------
/static/images/tables-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="410" height="240" viewBox="0 0 410 240" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g filter="url(#filter0_dd_1864_2007)">
 3 | <rect x="12" y="15" width="386" height="210" rx="8" fill="white"/>
 4 | <rect width="386" height="42" transform="translate(12 15)" fill="#F3F4F6"/>
 5 | <rect x="33" y="31" width="50" height="10" rx="2" fill="#D1D5DB"/>
 6 | <rect x="178.5" y="31" width="50" height="10" rx="2" fill="#D1D5DB"/>
 7 | <rect x="324" y="31" width="50" height="10" rx="2" fill="#D1D5DB"/>
 8 | <line x1="12" y1="56.5" x2="398" y2="56.5" stroke="#E4E4E7"/>
 9 | <rect x="33" y="73" width="50" height="10" rx="2" fill="#E5E7EB"/>
10 | <rect x="178.5" y="73" width="50" height="10" rx="2" fill="#E5E7EB"/>
11 | <rect x="324" y="73" width="50" height="10" rx="2" fill="#1A56DB"/>
12 | <line x1="12" y1="98.5" x2="398" y2="98.5" stroke="#E4E4E7"/>
13 | <rect x="33" y="115" width="50" height="10" rx="2" fill="#E5E7EB"/>
14 | <rect x="178.5" y="115" width="50" height="10" rx="2" fill="#E5E7EB"/>
15 | <rect x="324" y="115" width="50" height="10" rx="2" fill="#1A56DB"/>
16 | <line x1="12" y1="140.5" x2="398" y2="140.5" stroke="#E4E4E7"/>
17 | <rect x="33" y="157" width="50" height="10" rx="2" fill="#E5E7EB"/>
18 | <rect x="178.5" y="157" width="50" height="10" rx="2" fill="#E5E7EB"/>
19 | <rect x="324" y="157" width="50" height="10" rx="2" fill="#1A56DB"/>
20 | <line x1="12" y1="182.5" x2="398" y2="182.5" stroke="#E4E4E7"/>
21 | <rect x="33" y="199" width="50" height="10" rx="2" fill="#E5E7EB"/>
22 | <rect x="178.5" y="199" width="50" height="10" rx="2" fill="#E5E7EB"/>
23 | <rect x="324" y="199" width="50" height="10" rx="2" fill="#1A56DB"/>
24 | <rect x="12.5" y="15.5" width="385" height="209" rx="7.5" stroke="#D4D4D8"/>
25 | </g>
26 | <defs>
27 | <filter id="filter0_dd_1864_2007" x="6" y="13" width="398" height="222" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
28 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
29 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
30 | <feOffset dy="4"/>
31 | <feGaussianBlur stdDeviation="3"/>
32 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
33 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1864_2007"/>
34 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
35 | <feOffset dy="2"/>
36 | <feGaussianBlur stdDeviation="2"/>
37 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
38 | <feBlend mode="normal" in2="effect1_dropShadow_1864_2007" result="effect2_dropShadow_1864_2007"/>
39 | <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1864_2007" result="shape"/>
40 | </filter>
41 | </defs>
42 | </svg>
43 | 


--------------------------------------------------------------------------------
/src/lib/Form/Select.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import type { SvelteComponent } from 'svelte';
 4 | 
 5 |   export let value: any = '';
 6 |   export let sizing: 'sm' | 'md' | 'lg' = 'md';
 7 |   export let shadow: boolean = false;
 8 |   export let helperText: string = '';
 9 |   export let icon: typeof SvelteComponent | null = null;
10 |   export let color: 'base' | 'green' | 'red' = 'base';
11 | 
12 |   const colorClasses = {
13 |     base: {
14 |       input:
15 |         'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
16 |       helperText: 'text-gray-500 dark:text-gray-400',
17 |     },
18 |     green: {
19 |       input:
20 |         'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
21 |       helperText: 'text-green-600 dark:text-green-500',
22 |     },
23 |     red: {
24 |       input:
25 |         'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500',
26 |       helperText: 'text-red-600 dark:text-red-500',
27 |     },
28 |   };
29 | </script>
30 | 
31 | <div class="flex">
32 |   {#if $$slots.addon}
33 |     <span
34 |       class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400"
35 |     >
36 |       <slot name="addon" />
37 |     </span>
38 |   {/if}
39 |   <div class="relative w-full">
40 |     {#if icon}
41 |       <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
42 |         <svelte:component this={icon} class="h-5 w-5 text-gray-500 dark:text-gray-400" />
43 |       </div>
44 |     {/if}
45 |     <select
46 |       {...$$props}
47 |       bind:value
48 |       class={classNames(
49 |         'block w-full border disabled:cursor-not-allowed disabled:opacity-50',
50 |         colorClasses[color].input,
51 |         {
52 |           'pl-10': icon,
53 |           'rounded-lg': !$$slots.addon,
54 |           'rounded-r-lg': $$slots.addon,
55 |           'shadow-sm dark:shadow-sm-light': shadow,
56 |           'p-2 sm:text-xs': sizing === 'sm',
57 |           'p-2.5 text-sm': sizing === 'md',
58 |           'sm:text-md p-4': sizing === 'lg',
59 |         },
60 |         $$props.class
61 |       )}
62 |     >
63 |       <slot />
64 |     </select>
65 |     <div class={classNames('mt-1 text-sm', colorClasses[color].helperText)}>
66 |       <slot name="helper">
67 |         {helperText}
68 |       </slot>
69 |     </div>
70 |   </div>
71 | </div>
72 | 


--------------------------------------------------------------------------------
/src/lib/Alert/Alert.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import type { SvelteComponent } from 'svelte';
 3 |   import classNames from 'classnames';
 4 |   import { HiXOutline } from 'svelte-icons/hi';
 5 | 
 6 |   export let color: 'blue' | 'red' | 'green' | 'yellow' | 'gray' = 'blue';
 7 |   export let icon: typeof SvelteComponent | null = null;
 8 |   export let rounded: boolean = true;
 9 |   export let withBorderAccent: boolean = false;
10 |   export let onDismiss: boolean | (() => void) = false;
11 | 
12 |   const colorClasses = {
13 |     blue: 'text-blue-700 bg-blue-100 border-blue-500 dark:bg-blue-200 dark:text-blue-800',
14 |     red: 'text-red-700 bg-red-100 border-red-500 dark:bg-red-200 dark:text-red-800',
15 |     green: 'text-green-700 bg-green-100 border-green-500 dark:bg-green-200 dark:text-green-800',
16 |     yellow: 'text-yellow-700 bg-yellow-100 border-yellow-500 dark:bg-yellow-200 dark:text-yellow-800',
17 |     gray: 'text-gray-700 bg-gray-100 border-gray-500 dark:bg-gray-700 dark:text-gray-300',
18 |   };
19 | </script>
20 | 
21 | <div
22 |   class={classNames($$props.class, 'flex flex-col gap-2 p-4 text-sm', colorClasses[color], {
23 |     'rounded-lg': rounded,
24 |     'border-t-4': withBorderAccent,
25 |   })}
26 |   role="alert"
27 | >
28 |   <div class="flex items-center">
29 |     {#if icon}
30 |       <svelte:component this={icon} class="mr-3 inline h-5 w-5 flex-shrink-0" />
31 |     {/if}
32 | 
33 |     <slot />
34 |     {#if onDismiss}
35 |       <button
36 |         aria-label="Close"
37 |         class={classNames('-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 rounded-lg p-1.5 focus:ring-2', {
38 |           'bg-blue-100 text-blue-500 hover:bg-blue-200 focus:ring-blue-400 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300':
39 |             color === 'blue',
40 |           'bg-red-100 text-red-500 hover:bg-red-200 focus:ring-red-400 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300':
41 |             color === 'red',
42 |           'bg-green-100 text-green-500 hover:bg-green-200 focus:ring-green-400 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300':
43 |             color === 'green',
44 |           'bg-yellow-100 text-yellow-500 hover:bg-yellow-200 focus:ring-yellow-400 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300':
45 |             color === 'yellow',
46 |           'bg-gray-100 text-gray-500 hover:bg-gray-200 focus:ring-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white':
47 |             color === 'gray',
48 |         })}
49 |         data-testid="alert-dismiss"
50 |         on:click={typeof onDismiss === 'function' ? onDismiss : () => {}}
51 |         type="button"
52 |       >
53 |         <span class="sr-only">Close</span>
54 |         <HiXOutline class="h-5 w-5" />
55 |       </button>
56 |     {/if}
57 |   </div>
58 |   {#if $$slots.extra}
59 |     <div>
60 |       <slot name="extra" />
61 |     </div>
62 |   {/if}
63 | </div>
64 | 


--------------------------------------------------------------------------------
/src/routes/list-group.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { ListGroup, ListGroupItem } from '$lib';
 3 | 
 4 |   import Card from '$lib/Card/Card.svelte';
 5 |   import {
 6 |     HiAdjustmentsOutline,
 7 |     HiCloudDownloadSolid,
 8 |     HiHomeSolid,
 9 |     HiInboxInSolid,
10 |     HiUserCircleSolid,
11 |   } from 'svelte-icons/hi';
12 |   import { HighlightSvelte } from 'svelte-highlight';
13 | </script>
14 | 
15 | <div class="mx-auto flex max-w-4xl flex-col gap-8 dark:text-white">
16 |   <div class="flex flex-col gap-2">
17 |     <span class="text-2xl font-bold">Default list</span>
18 |     <Card>
19 |       <ListGroup class="w-48">
20 |         <ListGroupItem>Profile</ListGroupItem>
21 |         <ListGroupItem>Settings</ListGroupItem>
22 |         <ListGroupItem>Messages</ListGroupItem>
23 |         <ListGroupItem>Download</ListGroupItem>
24 |       </ListGroup>
25 |       <HighlightSvelte
26 |         code={`<ListGroup class="w-48">
27 |   <ListGroupItem>Profile</ListGroupItem>
28 |   <ListGroupItem>Settings</ListGroupItem>
29 |   <ListGroupItem>Messages</ListGroupItem>
30 |   <ListGroupItem>Download</ListGroupItem>
31 | </ListGroup>`}
32 |       />
33 |     </Card>
34 |   </div>
35 |   <div class="flex flex-col gap-2">
36 |     <span class="text-2xl font-bold">List group with links</span>
37 |     <Card>
38 |       <ListGroup class="w-48">
39 |         <ListGroupItem active={true} href="/list-group">Profile</ListGroupItem>
40 |         <ListGroupItem href="/list-group">Settings</ListGroupItem>
41 |         <ListGroupItem href="/list-group">Messages</ListGroupItem>
42 |         <ListGroupItem href="/list-group">Download</ListGroupItem>
43 |       </ListGroup>
44 |       <HighlightSvelte
45 |         code={`<ListGroup class="w-48">
46 |   <ListGroupItem active={true} href="/list-group">Profile</ListGroupItem>
47 |   <ListGroupItem href="/list-group">Settings</ListGroupItem>
48 |   <ListGroupItem href="/list-group">Messages</ListGroupItem>
49 |   <ListGroupItem href="/list-group">Download</ListGroupItem>
50 | </ListGroup>`}
51 |       />
52 |     </Card>
53 |   </div>
54 |   <div class="flex flex-col gap-2">
55 |     <span class="text-2xl font-bold">List group with icons </span>
56 |     <Card>
57 |       <ListGroup class="w-48">
58 |         <ListGroupItem active={true} icon={HiUserCircleSolid}>Profile</ListGroupItem>
59 |         <ListGroupItem icon={HiAdjustmentsOutline}>Settings</ListGroupItem>
60 |         <ListGroupItem icon={HiInboxInSolid}>Messages</ListGroupItem>
61 |         <ListGroupItem icon={HiCloudDownloadSolid}>Download</ListGroupItem>
62 |       </ListGroup>
63 |       <HighlightSvelte
64 |         code={`<ListGroup class="w-48">
65 |   <ListGroupItem active={true} icon={HiUserCircleSolid}>Profile</ListGroupItem>
66 |   <ListGroupItem icon={HiAdjustmentsOutline}>Settings</ListGroupItem>
67 |   <ListGroupItem icon={HiInboxInSolid}>Messages</ListGroupItem>
68 |   <ListGroupItem icon={HiCloudDownloadSolid}>Download</ListGroupItem>
69 | </ListGroup>`}
70 |       />
71 |     </Card>
72 |   </div>
73 | </div>
74 | 


--------------------------------------------------------------------------------
/src/lib/Form/TextInput.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import type { SvelteComponent } from 'svelte';
 4 | 
 5 |   export let value: string = '';
 6 |   export let sizing: 'sm' | 'md' | 'lg' = 'md';
 7 |   export let shadow: boolean = false;
 8 |   export let helperText: string = '';
 9 |   export let icon: typeof SvelteComponent | null = null;
10 |   export let color: 'base' | 'green' | 'red' = 'base';
11 |   export let addon: string = '';
12 | 
13 |   const colorClasses = {
14 |     base: {
15 |       input:
16 |         'bg-gray-50 border-gray-300 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500',
17 |       helperText: 'text-gray-500 dark:text-gray-400',
18 |     },
19 |     green: {
20 |       input:
21 |         'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
22 |       helperText: 'text-green-600 dark:text-green-500',
23 |     },
24 |     red: {
25 |       input:
26 |         'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500',
27 |       helperText: 'text-red-600 dark:text-red-500',
28 |     },
29 |   };
30 | </script>
31 | 
32 | <div class="flex">
33 |   {#if $$slots.addon || addon}
34 |     <span
35 |       class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400"
36 |     >
37 |       <slot name="addon">
38 |         {addon}
39 |       </slot>
40 |     </span>
41 |   {/if}
42 |   <div class="relative w-full">
43 |     {#if icon}
44 |       <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
45 |         <svelte:component this={icon} class="h-5 w-5 text-gray-500 dark:text-gray-400" />
46 |       </div>
47 |     {/if}
48 |     <input
49 |       {...$$props}
50 |       bind:value
51 |       class={classNames(
52 |         'block w-full border disabled:cursor-not-allowed disabled:opacity-50',
53 |         colorClasses[color].input,
54 |         {
55 |           'pl-10': icon !== null,
56 |           'rounded-lg': !($$slots.addon || addon),
57 |           'rounded-r-lg': $$slots.addon || addon,
58 |           'shadow-sm dark:shadow-sm-light': shadow,
59 |           'p-2 sm:text-xs': sizing === 'sm',
60 |           'p-2.5 text-sm': sizing === 'md',
61 |           'sm:text-md p-4': sizing === 'lg',
62 |         },
63 |         $$props.class
64 |       )}
65 |     />
66 |   </div>
67 | </div>
68 | 
69 | {#if helperText || $$slots.helper}
70 |   <div class={classNames('mt-1 text-sm', colorClasses[color].helperText)}>
71 |     <slot name="helper">
72 |       {helperText}
73 |     </slot>
74 |   </div>
75 | {/if}
76 | 


--------------------------------------------------------------------------------
/static/images/dropdown-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="240" height="270" viewBox="0 0 240 270" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <rect x="17" y="10" width="205" height="50" rx="8" fill="#1C64F2"/>
 3 |     <rect x="41" y="28" width="141.044" height="14" rx="2" fill="white"/>
 4 |     <path fill-rule="evenodd" clip-rule="evenodd"
 5 |           d="M197.337 32.2931C197.525 32.1056 197.779 32.0003 198.044 32.0003C198.309 32.0003 198.564 32.1056 198.751 32.2931L202.044 35.5861L205.337 32.2931C205.429 32.1976 205.54 32.1214 205.662 32.069C205.784 32.0166 205.915 31.989 206.048 31.9878C206.181 31.9867 206.312 32.012 206.435 32.0623C206.558 32.1125 206.67 32.1868 206.764 32.2807C206.858 32.3746 206.932 32.4862 206.982 32.6091C207.032 32.732 207.058 32.8637 207.056 32.9965C207.055 33.1293 207.028 33.2605 206.975 33.3825C206.923 33.5045 206.847 33.6148 206.751 33.7071L202.751 37.7071C202.564 37.8946 202.309 37.9999 202.044 37.9999C201.779 37.9999 201.525 37.8946 201.337 37.7071L197.337 33.7071C197.15 33.5196 197.044 33.2652 197.044 33.0001C197.044 32.7349 197.15 32.4806 197.337 32.2931V32.2931Z"
 6 |           fill="white"/>
 7 |     <g filter="url(#filter0_dd_2159_2825)">
 8 |         <rect x="17" y="72" width="205" height="188" rx="8" fill="#374151"/>
 9 |         <circle cx="41" cy="98" r="6" fill="#6B7280"/>
10 |         <rect x="59" y="93" width="143" height="10" rx="2" fill="#9CA3AF"/>
11 |         <circle cx="41" cy="132" r="6" fill="#6B7280"/>
12 |         <rect x="59" y="127" width="143" height="10" rx="2" fill="#9CA3AF"/>
13 |         <circle cx="41" cy="166" r="6" fill="#6B7280"/>
14 |         <rect x="59" y="161" width="143" height="10" rx="2" fill="#9CA3AF"/>
15 |         <circle cx="41" cy="200" r="6" fill="#6B7280"/>
16 |         <rect x="59" y="195" width="143" height="10" rx="2" fill="#9CA3AF"/>
17 |         <circle cx="41" cy="234" r="6" fill="#6B7280"/>
18 |         <rect x="59" y="229" width="143" height="10" rx="2" fill="#9CA3AF"/>
19 |         <rect x="17.5" y="72.5" width="204" height="187" rx="7.5" stroke="#4B5563"/>
20 |     </g>
21 |     <defs>
22 |         <filter id="filter0_dd_2159_2825" x="11" y="70" width="217" height="200" filterUnits="userSpaceOnUse"
23 |                 color-interpolation-filters="sRGB">
24 |             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
25 |             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
26 |                            result="hardAlpha"/>
27 |             <feOffset dy="4"/>
28 |             <feGaussianBlur stdDeviation="3"/>
29 |             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
30 |             <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2159_2825"/>
31 |             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
32 |                            result="hardAlpha"/>
33 |             <feOffset dy="2"/>
34 |             <feGaussianBlur stdDeviation="2"/>
35 |             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
36 |             <feBlend mode="normal" in2="effect1_dropShadow_2159_2825" result="effect2_dropShadow_2159_2825"/>
37 |             <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2159_2825" result="shape"/>
38 |         </filter>
39 |     </defs>
40 | </svg>
41 | 


--------------------------------------------------------------------------------
/static/images/dropdown-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="240" height="270" viewBox="0 0 240 270" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <rect x="17" y="10" width="205" height="50" rx="8" fill="#1A56DB"/>
 3 |     <rect x="41" y="28" width="141.044" height="14" rx="2" fill="white"/>
 4 |     <path fill-rule="evenodd" clip-rule="evenodd"
 5 |           d="M197.337 32.2931C197.525 32.1056 197.779 32.0003 198.044 32.0003C198.309 32.0003 198.564 32.1056 198.751 32.2931L202.044 35.5861L205.337 32.2931C205.429 32.1976 205.54 32.1214 205.662 32.069C205.784 32.0166 205.915 31.989 206.048 31.9878C206.181 31.9867 206.312 32.012 206.435 32.0623C206.558 32.1125 206.67 32.1868 206.764 32.2807C206.858 32.3746 206.932 32.4862 206.982 32.6091C207.032 32.732 207.058 32.8637 207.056 32.9965C207.055 33.1293 207.028 33.2605 206.975 33.3825C206.923 33.5045 206.847 33.6148 206.751 33.7071L202.751 37.7071C202.564 37.8946 202.309 37.9999 202.044 37.9999C201.779 37.9999 201.525 37.8946 201.337 37.7071L197.337 33.7071C197.15 33.5196 197.044 33.2652 197.044 33.0001C197.044 32.7349 197.15 32.4806 197.337 32.2931V32.2931Z"
 6 |           fill="white"/>
 7 |     <g filter="url(#filter0_dd_1864_1983)">
 8 |         <rect x="17" y="72" width="205" height="188" rx="8" fill="white"/>
 9 |         <circle cx="41" cy="98" r="6" fill="#E5E7EB"/>
10 |         <rect x="59" y="93" width="143" height="10" rx="2" fill="#E5E7EB"/>
11 |         <circle cx="41" cy="132" r="6" fill="#E5E7EB"/>
12 |         <rect x="59" y="127" width="143" height="10" rx="2" fill="#E5E7EB"/>
13 |         <circle cx="41" cy="166" r="6" fill="#E5E7EB"/>
14 |         <rect x="59" y="161" width="143" height="10" rx="2" fill="#E5E7EB"/>
15 |         <circle cx="41" cy="200" r="6" fill="#E5E7EB"/>
16 |         <rect x="59" y="195" width="143" height="10" rx="2" fill="#E5E7EB"/>
17 |         <circle cx="41" cy="234" r="6" fill="#E5E7EB"/>
18 |         <rect x="59" y="229" width="143" height="10" rx="2" fill="#E5E7EB"/>
19 |         <rect x="17.5" y="72.5" width="204" height="187" rx="7.5" stroke="#D1D5DB"/>
20 |     </g>
21 |     <defs>
22 |         <filter id="filter0_dd_1864_1983" x="11" y="70" width="217" height="200" filterUnits="userSpaceOnUse"
23 |                 color-interpolation-filters="sRGB">
24 |             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
25 |             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
26 |                            result="hardAlpha"/>
27 |             <feOffset dy="4"/>
28 |             <feGaussianBlur stdDeviation="3"/>
29 |             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
30 |             <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1864_1983"/>
31 |             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
32 |                            result="hardAlpha"/>
33 |             <feOffset dy="2"/>
34 |             <feGaussianBlur stdDeviation="2"/>
35 |             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
36 |             <feBlend mode="normal" in2="effect1_dropShadow_1864_1983" result="effect2_dropShadow_1864_1983"/>
37 |             <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1864_1983" result="shape"/>
38 |         </filter>
39 |     </defs>
40 | </svg>
41 | 


--------------------------------------------------------------------------------
/static/images/footer-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="339" height="123" viewBox="0 0 339 123" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g filter="url(#filter0_dd_2398_3280)">
 3 | <rect x="6" y="2" width="327" height="31" rx="4" fill="#F9FAFB"/>
 4 | <rect x="18" y="14" width="36" height="7" rx="3" fill="#9CA3AF"/>
 5 | <rect x="175.5" y="14.5" width="28.875" height="6" rx="2" fill="#D1D5DB"/>
 6 | <rect x="214.375" y="14.5" width="28.875" height="6" rx="2" fill="#D1D5DB"/>
 7 | <rect x="253.25" y="14.5" width="28.875" height="6" rx="2" fill="#D1D5DB"/>
 8 | <rect x="292.125" y="14.5" width="28.875" height="6" rx="2" fill="#D1D5DB"/>
 9 | </g>
10 | <g filter="url(#filter1_dd_2398_3280)">
11 | <rect x="6" y="54" width="327" height="59" rx="4" fill="#F9FAFB"/>
12 | <rect x="18" y="66" width="36" height="7" rx="3" fill="#9CA3AF"/>
13 | <rect x="175.5" y="66.5" width="28.875" height="6" rx="2" fill="#D1D5DB"/>
14 | <rect x="214.375" y="66.5" width="28.875" height="6" rx="2" fill="#D1D5DB"/>
15 | <rect x="253.25" y="66.5" width="28.875" height="6" rx="2" fill="#D1D5DB"/>
16 | <rect x="292.125" y="66.5" width="28.875" height="6" rx="2" fill="#D1D5DB"/>
17 | <line x1="18" y1="84.5" x2="321" y2="84.5" stroke="#E5E7EB"/>
18 | <rect x="106" y="97" width="127" height="4" rx="2" fill="#D1D5DB"/>
19 | </g>
20 | <defs>
21 | <filter id="filter0_dd_2398_3280" x="0" y="0" width="339" height="43" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
22 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
23 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
24 | <feOffset dy="4"/>
25 | <feGaussianBlur stdDeviation="3"/>
26 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
27 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2398_3280"/>
28 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
29 | <feOffset dy="2"/>
30 | <feGaussianBlur stdDeviation="2"/>
31 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
32 | <feBlend mode="normal" in2="effect1_dropShadow_2398_3280" result="effect2_dropShadow_2398_3280"/>
33 | <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2398_3280" result="shape"/>
34 | </filter>
35 | <filter id="filter1_dd_2398_3280" x="0" y="52" width="339" height="71" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
36 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
37 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
38 | <feOffset dy="4"/>
39 | <feGaussianBlur stdDeviation="3"/>
40 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
41 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2398_3280"/>
42 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
43 | <feOffset dy="2"/>
44 | <feGaussianBlur stdDeviation="2"/>
45 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
46 | <feBlend mode="normal" in2="effect1_dropShadow_2398_3280" result="effect2_dropShadow_2398_3280"/>
47 | <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2398_3280" result="shape"/>
48 | </filter>
49 | </defs>
50 | </svg>
51 | 


--------------------------------------------------------------------------------
/static/images/card-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="360" height="310" viewBox="0 0 360 310" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <g filter="url(#filter0_dd_2159_2859)">
 3 |         <rect x="16" y="14" width="327" height="282" rx="8" fill="#374151"/>
 4 |         <rect x="40" y="46" width="204" height="18" rx="9" fill="#F9FAFB"/>
 5 |         <rect x="40" y="80" width="279" height="18" rx="9" fill="#9CA3AF"/>
 6 |         <rect x="40" y="122" width="279" height="12" rx="6" fill="#9CA3AF"/>
 7 |         <rect x="40" y="146" width="225" height="12" rx="6" fill="#9CA3AF"/>
 8 |         <rect x="40" y="170" width="269" height="12" rx="6" fill="#9CA3AF"/>
 9 |         <rect x="40" y="194" width="157" height="12" rx="6" fill="#9CA3AF"/>
10 |         <path d="M47.2547 255.222C50.2275 253.542 53.5852 252.661 57 252.667C60.5417 252.667 63.8666 253.595 66.7452 255.222M61.25 244.167C61.25 245.294 60.8022 246.375 60.0052 247.172C59.2082 247.969 58.1272 248.417 57 248.417C55.8728 248.417 54.7918 247.969 53.9948 247.172C53.1978 246.375 52.75 245.294 52.75 244.167C52.75 243.039 53.1978 241.958 53.9948 241.161C54.7918 240.364 55.8728 239.917 57 239.917C58.1272 239.917 59.2082 240.364 60.0052 241.161C60.8022 241.958 61.25 243.039 61.25 244.167ZM69.75 247C69.75 248.674 69.4202 250.332 68.7795 251.879C68.1387 253.426 67.1996 254.832 66.0156 256.016C64.8317 257.2 63.4261 258.139 61.8792 258.779C60.3323 259.42 58.6744 259.75 57 259.75C55.3256 259.75 53.6677 259.42 52.1208 258.779C50.5739 258.139 49.1683 257.2 47.9844 256.016C46.8004 254.832 45.8613 253.426 45.2205 251.879C44.5798 250.332 44.25 248.674 44.25 247C44.25 243.618 45.5933 240.375 47.9844 237.984C50.3755 235.593 53.6185 234.25 57 234.25C60.3815 234.25 63.6245 235.593 66.0156 237.984C68.4067 240.375 69.75 243.618 69.75 247Z"
11 |               stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
12 |         <rect x="86" y="231" width="144" height="12" rx="6" fill="#9CA3AF"/>
13 |         <rect x="86" y="251" width="76" height="12" rx="6" fill="#9CA3AF"/>
14 |         <rect x="16.5" y="14.5" width="326" height="281" rx="7.5" stroke="#4B5563"/>
15 |     </g>
16 |     <defs>
17 |         <filter id="filter0_dd_2159_2859" x="10" y="12" width="339" height="294" filterUnits="userSpaceOnUse"
18 |                 color-interpolation-filters="sRGB">
19 |             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
20 |             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
21 |                            result="hardAlpha"/>
22 |             <feOffset dy="4"/>
23 |             <feGaussianBlur stdDeviation="3"/>
24 |             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
25 |             <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2159_2859"/>
26 |             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
27 |                            result="hardAlpha"/>
28 |             <feOffset dy="2"/>
29 |             <feGaussianBlur stdDeviation="2"/>
30 |             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
31 |             <feBlend mode="normal" in2="effect1_dropShadow_2159_2859" result="effect2_dropShadow_2159_2859"/>
32 |             <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2159_2859" result="shape"/>
33 |         </filter>
34 |     </defs>
35 | </svg>
36 | 


--------------------------------------------------------------------------------
/src/lib/Pagination/Pagination.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import classNames from 'classnames';
 3 |   import { HiChevronLeftOutline, HiChevronRightOutline } from 'svelte-icons/hi';
 4 | 
 5 |   export let currentPage: number;
 6 |   export let layout: 'navigation' | 'pagination' | 'table' = 'pagination';
 7 |   export let showIcons: boolean = false;
 8 |   export let totalPages: number;
 9 | 
10 |   const range = (start: number, end: number): number[] => {
11 |     return [...Array(end - start + 1).keys()].map((key: number): number => key + start);
12 |   };
13 | 
14 |   $: firstPage = Math.max(1, currentPage - 3);
15 |   $: lastPage = Math.min(currentPage + 3, totalPages);
16 | 
17 |   const updatePage = (newPage: number): void => {
18 |     currentPage = Math.min(Math.max(1, newPage), totalPages);
19 |   };
20 | </script>
21 | 
22 | <nav {...$$props}>
23 |   {#if layout === 'table'}
24 |     <div class="text-sm text-gray-700 dark:text-gray-400">
25 |       Showing <span class="font-semibold text-gray-900 dark:text-white">{firstPage}</span> to&nbsp;
26 |       <span class="font-semibold text-gray-900 dark:text-white">{lastPage}</span> of&nbsp;
27 |       <span class="font-semibold text-gray-900 dark:text-white">{totalPages}</span> Entries
28 |     </div>
29 |   {/if}
30 |   <ul
31 |     class={classNames(
32 |       {
33 |         'xs:mt-0 mt-2': layout === 'table',
34 |       },
35 |       'inline-flex items-center -space-x-px'
36 |     )}
37 |   >
38 |     <li>
39 |       <button
40 |         class={classNames(
41 |           'ml-0 rounded-l-lg border border-gray-300 bg-white py-2 px-3 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white',
42 |           showIcons ? 'inline-flex' : ''
43 |         )}
44 |         on:click={() => updatePage(currentPage - 1)}
45 |       >
46 |         {#if showIcons}
47 |           <HiChevronLeftOutline aria-hidden="true" class="h-5 w-5" />
48 |         {/if}
49 |         Previous
50 |       </button>
51 |     </li>
52 |     {#if layout === 'pagination'}
53 |       {#each range(firstPage, lastPage) as page}
54 |         <li aria-current={page === currentPage ? 'page' : undefined}>
55 |           <button
56 |             class={classNames(
57 |               'w-12 border border-gray-300 bg-white py-2 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white',
58 |               currentPage === page &&
59 |                 'bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white'
60 |             )}
61 |             on:click={() => (currentPage = page)}
62 |           >
63 |             {page}
64 |           </button>
65 |         </li>
66 |       {/each}
67 |     {/if}
68 |     <li>
69 |       <button
70 |         class={classNames(
71 |           'rounded-r-lg border border-gray-300 bg-white py-2 px-3 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white',
72 |           showIcons ? 'inline-flex' : ''
73 |         )}
74 |         on:click={() => updatePage(currentPage + 1)}
75 |       >
76 |         Next
77 |         {#if showIcons}
78 |           <HiChevronRightOutline aria-hidden="true" class="h-5 w-5" />
79 |         {/if}
80 |       </button>
81 |     </li>
82 |   </ul>
83 | </nav>
84 | 


--------------------------------------------------------------------------------
/static/images/card-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="360" height="310" viewBox="0 0 360 310" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <g filter="url(#filter0_dd_1864_1993)">
 3 |         <rect x="16" y="14" width="327" height="282" rx="8" fill="white"/>
 4 |         <rect width="279" height="160" transform="translate(40 46)" fill="white"/>
 5 |         <rect x="40" y="46" width="204" height="18" rx="9" fill="#9CA3AF"/>
 6 |         <rect x="40" y="80" width="279" height="18" rx="9" fill="#D1D5DB"/>
 7 |         <rect x="40" y="122" width="279" height="12" rx="6" fill="#E5E7EB"/>
 8 |         <rect x="40" y="146" width="225" height="12" rx="6" fill="#E5E7EB"/>
 9 |         <rect x="40" y="170" width="269" height="12" rx="6" fill="#E5E7EB"/>
10 |         <rect x="40" y="194" width="157" height="12" rx="6" fill="#E5E7EB"/>
11 |         <path d="M47.2547 255.222C50.2275 253.542 53.5852 252.661 57 252.667C60.5417 252.667 63.8666 253.595 66.7452 255.222M61.25 244.167C61.25 245.294 60.8022 246.375 60.0052 247.172C59.2082 247.969 58.1272 248.417 57 248.417C55.8728 248.417 54.7918 247.969 53.9948 247.172C53.1978 246.375 52.75 245.294 52.75 244.167C52.75 243.039 53.1978 241.958 53.9948 241.161C54.7918 240.364 55.8728 239.917 57 239.917C58.1272 239.917 59.2082 240.364 60.0052 241.161C60.8022 241.958 61.25 243.039 61.25 244.167ZM69.75 247C69.75 248.674 69.4202 250.332 68.7795 251.879C68.1387 253.426 67.1996 254.832 66.0156 256.016C64.8317 257.2 63.4261 258.139 61.8792 258.779C60.3323 259.42 58.6744 259.75 57 259.75C55.3256 259.75 53.6677 259.42 52.1208 258.779C50.5739 258.139 49.1683 257.2 47.9844 256.016C46.8004 254.832 45.8613 253.426 45.2205 251.879C44.5798 250.332 44.25 248.674 44.25 247C44.25 243.618 45.5933 240.375 47.9844 237.984C50.3755 235.593 53.6185 234.25 57 234.25C60.3815 234.25 63.6245 235.593 66.0156 237.984C68.4067 240.375 69.75 243.618 69.75 247Z"
12 |               stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
13 |         <rect x="86" y="231" width="144" height="12" rx="6" fill="#D1D5DB"/>
14 |         <rect x="86" y="251" width="76" height="12" rx="6" fill="#E5E7EB"/>
15 |         <rect x="16.5" y="14.5" width="326" height="281" rx="7.5" stroke="#D1D5DB"/>
16 |     </g>
17 |     <defs>
18 |         <filter id="filter0_dd_1864_1993" x="10" y="12" width="339" height="294" filterUnits="userSpaceOnUse"
19 |                 color-interpolation-filters="sRGB">
20 |             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
21 |             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
22 |                            result="hardAlpha"/>
23 |             <feOffset dy="4"/>
24 |             <feGaussianBlur stdDeviation="3"/>
25 |             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
26 |             <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1864_1993"/>
27 |             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
28 |                            result="hardAlpha"/>
29 |             <feOffset dy="2"/>
30 |             <feGaussianBlur stdDeviation="2"/>
31 |             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
32 |             <feBlend mode="normal" in2="effect1_dropShadow_1864_1993" result="effect2_dropShadow_1864_1993"/>
33 |             <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1864_1993" result="shape"/>
34 |         </filter>
35 |     </defs>
36 | </svg>
37 | 


--------------------------------------------------------------------------------
/src/routes/card.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Card from '$lib/Card/Card.svelte';
 3 |   import { HiHomeSolid } from 'svelte-icons/hi';
 4 |   import { HighlightSvelte } from 'svelte-highlight';
 5 | </script>
 6 | 
 7 | <div class="mx-auto flex max-w-4xl flex-col gap-8 dark:text-white">
 8 |   <div class="flex flex-col gap-2">
 9 |     <span class="text-2xl font-bold">Default card</span>
10 |     <Card>
11 |       <Card class="max-w-sm">
12 |         <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
13 |           Noteworthy technology acquisitions 2021
14 |         </h5>
15 |         <p class="font-normal text-gray-700 dark:text-gray-400">
16 |           Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
17 |         </p>
18 |       </Card>
19 |       <HighlightSvelte
20 |         code={`<Card class="max-w-sm">
21 |   <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
22 |     Noteworthy technology acquisitions 2021
23 |   </h5>
24 |   <p class="font-normal text-gray-700 dark:text-gray-400">
25 |     Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
26 |   </p>
27 | </Card>`}
28 |       />
29 |     </Card>
30 |   </div>
31 |   <div class="flex flex-col gap-2">
32 |     <span class="text-2xl font-bold">Card with decorative image </span>
33 |     <Card>
34 |       <Card class="max-w-sm" imgSrc="https://flowbite.com/docs/images/blog/image-1.jpg">
35 |         <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
36 |           Noteworthy technology acquisitions 2021
37 |         </h5>
38 |         <p class="font-normal text-gray-700 dark:text-gray-400">
39 |           Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
40 |         </p>
41 |       </Card>
42 |       <HighlightSvelte
43 |         code={`<Card class="max-w-sm" imgSrc="https://flowbite.com/docs/images/blog/image-1.jpg">
44 |   <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
45 |     Noteworthy technology acquisitions 2021
46 |   </h5>
47 |   <p class="font-normal text-gray-700 dark:text-gray-400">
48 |     Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
49 |   </p>
50 | </Card>`}
51 |       />
52 |     </Card>
53 |   </div>
54 |   <div class="flex flex-col gap-2">
55 |     <span class="text-2xl font-bold">Horizontal card </span>
56 |     <Card>
57 |       <Card class="max-w-sm" imgSrc="https://flowbite.com/docs/images/blog/image-4.jpg" horizontal={true}>
58 |         <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
59 |           Noteworthy technology acquisitions 2021
60 |         </h5>
61 |         <p class="font-normal text-gray-700 dark:text-gray-400">
62 |           Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
63 |         </p>
64 |       </Card>
65 |       <HighlightSvelte
66 |         code={`<Card class="max-w-sm" imgSrc="https://flowbite.com/docs/images/blog/image-4.jpg" horizontal={true}>
67 |   <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
68 |     Noteworthy technology acquisitions 2021
69 |   </h5>
70 |   <p class="font-normal text-gray-700 dark:text-gray-400">
71 |     Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
72 |   </p>
73 | </Card>`}
74 |       />
75 |     </Card>
76 |   </div>
77 | </div>
78 | 


--------------------------------------------------------------------------------
/static/images/list-group-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="280" height="220" viewBox="0 0 280 220" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <g filter="url(#filter0_dd_1864_2041)">
 3 |         <rect x="10" y="12" width="260" height="196" rx="8" fill="white"/>
 4 |         <g clip-path="url(#clip0_1864_2041)">
 5 |             <circle cx="39.5" cy="36.5" r="7.4375" fill="white" stroke="#E5E7EB" stroke-width="3"/>
 6 |         </g>
 7 |         <rect x="64" y="31.5" width="182" height="10" rx="4" fill="#D1D5DB"/>
 8 |         <line x1="10" y1="60.5" x2="270" y2="60.5" stroke="#E4E4E7"/>
 9 |         <g clip-path="url(#clip1_1864_2041)">
10 |             <circle cx="39.5" cy="85.5" r="7.4375" fill="white" stroke="#E5E7EB" stroke-width="3"/>
11 |         </g>
12 |         <rect x="64" y="80.5" width="182" height="10" rx="4" fill="#D1D5DB"/>
13 |         <line x1="10" y1="109.5" x2="270" y2="109.5" stroke="#E4E4E7"/>
14 |         <g clip-path="url(#clip2_1864_2041)">
15 |             <circle cx="39.5" cy="134.5" r="7.4375" fill="white" stroke="#E5E7EB" stroke-width="3"/>
16 |         </g>
17 |         <rect x="64" y="129.5" width="182" height="10" rx="4" fill="#D1D5DB"/>
18 |         <line x1="10" y1="158.5" x2="270" y2="158.5" stroke="#E4E4E7"/>
19 |         <g clip-path="url(#clip3_1864_2041)">
20 |             <circle cx="39.5" cy="183.5" r="7.4375" fill="white" stroke="#E5E7EB" stroke-width="3"/>
21 |         </g>
22 |         <rect x="64" y="178.5" width="182" height="10" rx="4" fill="#D1D5DB"/>
23 |         <rect x="10.5" y="12.5" width="259" height="195" rx="7.5" stroke="#D4D4D8"/>
24 |     </g>
25 |     <defs>
26 |         <filter id="filter0_dd_1864_2041" x="4" y="10" width="272" height="208" filterUnits="userSpaceOnUse"
27 |                 color-interpolation-filters="sRGB">
28 |             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
29 |             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
30 |                            result="hardAlpha"/>
31 |             <feOffset dy="4"/>
32 |             <feGaussianBlur stdDeviation="3"/>
33 |             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
34 |             <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1864_2041"/>
35 |             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
36 |                            result="hardAlpha"/>
37 |             <feOffset dy="2"/>
38 |             <feGaussianBlur stdDeviation="2"/>
39 |             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
40 |             <feBlend mode="normal" in2="effect1_dropShadow_1864_2041" result="effect2_dropShadow_1864_2041"/>
41 |             <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1864_2041" result="shape"/>
42 |         </filter>
43 |         <clipPath id="clip0_1864_2041">
44 |             <rect width="17" height="17" fill="white" transform="translate(31 28)"/>
45 |         </clipPath>
46 |         <clipPath id="clip1_1864_2041">
47 |             <rect width="17" height="17" fill="white" transform="translate(31 77)"/>
48 |         </clipPath>
49 |         <clipPath id="clip2_1864_2041">
50 |             <rect width="17" height="17" fill="white" transform="translate(31 126)"/>
51 |         </clipPath>
52 |         <clipPath id="clip3_1864_2041">
53 |             <rect width="17" height="17" fill="white" transform="translate(31 175)"/>
54 |         </clipPath>
55 |     </defs>
56 | </svg>
57 | 


--------------------------------------------------------------------------------
/static/images/footer-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="341" height="125" viewBox="0 0 341 125" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g filter="url(#filter0_dd_2398_3279)">
 3 | <rect x="7" y="3" width="327" height="31" rx="4" fill="#374151"/>
 4 | <rect x="19" y="15" width="36" height="7" rx="3" fill="#9CA3AF"/>
 5 | <rect x="176.5" y="15.5" width="28.875" height="6" rx="2" fill="#6B7280"/>
 6 | <rect x="215.375" y="15.5" width="28.875" height="6" rx="2" fill="#6B7280"/>
 7 | <rect x="254.25" y="15.5" width="28.875" height="6" rx="2" fill="#6B7280"/>
 8 | <rect x="293.125" y="15.5" width="28.875" height="6" rx="2" fill="#6B7280"/>
 9 | <rect x="6.5" y="2.5" width="328" height="32" rx="4.5" stroke="#374151"/>
10 | </g>
11 | <g filter="url(#filter1_dd_2398_3279)">
12 | <rect x="7" y="55" width="327" height="59" rx="4" fill="#374151"/>
13 | <rect x="19" y="67" width="36" height="7" rx="3" fill="#9CA3AF"/>
14 | <rect x="176.5" y="67.5" width="28.875" height="6" rx="2" fill="#6B7280"/>
15 | <rect x="215.375" y="67.5" width="28.875" height="6" rx="2" fill="#6B7280"/>
16 | <rect x="254.25" y="67.5" width="28.875" height="6" rx="2" fill="#6B7280"/>
17 | <rect x="293.125" y="67.5" width="28.875" height="6" rx="2" fill="#6B7280"/>
18 | <line x1="19" y1="85.5" x2="322" y2="85.5" stroke="#4B5563"/>
19 | <rect x="107" y="98" width="127" height="4" rx="2" fill="#6B7280"/>
20 | <rect x="6.5" y="54.5" width="328" height="60" rx="4.5" stroke="#374151"/>
21 | </g>
22 | <defs>
23 | <filter id="filter0_dd_2398_3279" x="0" y="0" width="341" height="45" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
24 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
25 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
26 | <feOffset dy="4"/>
27 | <feGaussianBlur stdDeviation="3"/>
28 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
29 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2398_3279"/>
30 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
31 | <feOffset dy="2"/>
32 | <feGaussianBlur stdDeviation="2"/>
33 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
34 | <feBlend mode="normal" in2="effect1_dropShadow_2398_3279" result="effect2_dropShadow_2398_3279"/>
35 | <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2398_3279" result="shape"/>
36 | </filter>
37 | <filter id="filter1_dd_2398_3279" x="0" y="52" width="341" height="73" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
38 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
39 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
40 | <feOffset dy="4"/>
41 | <feGaussianBlur stdDeviation="3"/>
42 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
43 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2398_3279"/>
44 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
45 | <feOffset dy="2"/>
46 | <feGaussianBlur stdDeviation="2"/>
47 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
48 | <feBlend mode="normal" in2="effect1_dropShadow_2398_3279" result="effect2_dropShadow_2398_3279"/>
49 | <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2398_3279" result="shape"/>
50 | </filter>
51 | </defs>
52 | </svg>
53 | 


--------------------------------------------------------------------------------
/static/images/modal-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="350" height="230" viewBox="0 0 350 230" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g filter="url(#filter0_dd_2159_3136)">
 3 | <rect x="11" y="11" width="327" height="208" rx="8" fill="#374151"/>
 4 | <rect x="23" y="25.5" width="76" height="10" rx="3" fill="#9CA3AF"/>
 5 | <path d="M322.069 34.4229C322.116 34.4671 322.178 34.4915 322.243 34.4909C322.308 34.4903 322.371 34.464 322.418 34.4177C322.464 34.3713 322.49 34.3086 322.491 34.2431C322.491 34.1786 322.467 34.1164 322.423 34.0695L319.207 30.8537L318.853 30.5001L319.207 30.1466L322.427 26.9268L322.433 26.9207L322.433 26.9207C322.457 26.8977 322.476 26.8701 322.489 26.8396C322.502 26.8091 322.509 26.7763 322.509 26.7431C322.509 26.7099 322.503 26.677 322.491 26.6462C322.478 26.6155 322.459 26.5876 322.436 26.5641C322.412 26.5407 322.385 26.5221 322.354 26.5095C322.323 26.497 322.29 26.4906 322.257 26.4909C322.224 26.4912 322.191 26.4981 322.161 26.5112C322.13 26.5243 322.102 26.5434 322.079 26.5672L322.073 26.5735L322.073 26.5734L318.854 29.7932L318.5 30.1467L318.146 29.7932L314.927 26.5735C314.927 26.5735 314.927 26.5734 314.927 26.5734C314.88 26.5266 314.816 26.5003 314.75 26.5003C314.684 26.5003 314.62 26.5266 314.573 26.5734C314.573 26.5734 314.573 26.5734 314.573 26.5735M322.069 34.4229L314.573 26.5735M322.069 34.4229L318.854 31.2071L318.5 30.8535L318.146 31.2071L314.931 34.4229C314.884 34.4671 314.821 34.4915 314.757 34.4909C314.691 34.4903 314.629 34.464 314.582 34.4177C314.536 34.3713 314.51 34.3086 314.509 34.2431C314.509 34.1786 314.533 34.1164 314.577 34.0695L317.793 30.8537L318.147 30.5001L317.793 30.1466L314.573 26.9269M322.069 34.4229L314.573 26.9269M314.573 26.5735C314.526 26.6204 314.5 26.6839 314.5 26.7501C314.5 26.8164 314.526 26.8799 314.573 26.9268M314.573 26.5735L314.573 26.9268M314.573 26.9268C314.573 26.9268 314.573 26.9269 314.573 26.9269M314.573 26.9268L314.573 26.9269" fill="#9CA3AF" stroke="#9CA3AF"/>
 6 | <line x1="11" y1="49.5" x2="338" y2="49.5" stroke="#4B5563"/>
 7 | <rect x="23" y="74" width="303" height="10" rx="3" fill="#6B7280"/>
 8 | <rect x="23" y="96" width="303" height="10" rx="3" fill="#6B7280"/>
 9 | <rect x="23" y="118" width="269" height="10" rx="3" fill="#6B7280"/>
10 | <rect x="23" y="142" width="157" height="10" rx="3" fill="#6B7280"/>
11 | <line x1="11" y1="175.5" x2="338" y2="175.5" stroke="#4B5563"/>
12 | <rect x="232" y="188" width="41" height="19" rx="2" fill="#1A56DB"/>
13 | <rect x="285" y="188" width="41" height="19" rx="2" fill="#9CA3AF"/>
14 | <rect x="10.5" y="10.5" width="328" height="209" rx="8.5" stroke="#374151"/>
15 | </g>
16 | <defs>
17 | <filter id="filter0_dd_2159_3136" x="4" y="8" width="341" height="222" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
18 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
19 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
20 | <feOffset dy="4"/>
21 | <feGaussianBlur stdDeviation="3"/>
22 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
23 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2159_3136"/>
24 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
25 | <feOffset dy="2"/>
26 | <feGaussianBlur stdDeviation="2"/>
27 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
28 | <feBlend mode="normal" in2="effect1_dropShadow_2159_3136" result="effect2_dropShadow_2159_3136"/>
29 | <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2159_3136" result="shape"/>
30 | </filter>
31 | </defs>
32 | </svg>
33 | 


--------------------------------------------------------------------------------
/static/images/modal-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="350" height="230" viewBox="0 0 350 230" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g filter="url(#filter0_dd_1864_2045)">
 3 | <rect x="11" y="11" width="327" height="208" rx="8" fill="white"/>
 4 | <rect x="23" y="25.5" width="76" height="10" rx="3" fill="#E5E7EB"/>
 5 | <path d="M322.069 34.4229C322.116 34.4671 322.178 34.4915 322.243 34.4909C322.308 34.4903 322.371 34.464 322.418 34.4177C322.464 34.3713 322.49 34.3086 322.491 34.2431C322.491 34.1786 322.467 34.1164 322.423 34.0695L319.207 30.8537L318.853 30.5001L319.207 30.1466L322.427 26.9268L322.433 26.9207L322.433 26.9207C322.457 26.8977 322.476 26.8701 322.489 26.8396C322.502 26.8091 322.509 26.7763 322.509 26.7431C322.509 26.7099 322.503 26.677 322.491 26.6462C322.478 26.6155 322.459 26.5876 322.436 26.5641C322.412 26.5407 322.385 26.5221 322.354 26.5095C322.323 26.497 322.29 26.4906 322.257 26.4909C322.224 26.4912 322.191 26.4981 322.161 26.5112C322.13 26.5243 322.102 26.5434 322.079 26.5672L322.073 26.5735L322.073 26.5734L318.854 29.7932L318.5 30.1467L318.146 29.7932L314.927 26.5735C314.927 26.5735 314.927 26.5734 314.927 26.5734C314.88 26.5266 314.816 26.5003 314.75 26.5003C314.684 26.5003 314.62 26.5266 314.573 26.5734C314.573 26.5734 314.573 26.5734 314.573 26.5735M322.069 34.4229L314.573 26.5735M322.069 34.4229L318.854 31.2071L318.5 30.8535L318.146 31.2071L314.931 34.4229C314.884 34.4671 314.821 34.4915 314.757 34.4909C314.691 34.4903 314.629 34.464 314.582 34.4177C314.536 34.3713 314.51 34.3086 314.509 34.2431C314.509 34.1786 314.533 34.1164 314.577 34.0695L317.793 30.8537L318.147 30.5001L317.793 30.1466L314.573 26.9269M322.069 34.4229L314.573 26.9269M314.573 26.5735C314.526 26.6204 314.5 26.6839 314.5 26.7501C314.5 26.8164 314.526 26.8799 314.573 26.9268M314.573 26.5735L314.573 26.9268M314.573 26.9268C314.573 26.9268 314.573 26.9269 314.573 26.9269M314.573 26.9268L314.573 26.9269" fill="#A1A1AA" stroke="#9CA3AF"/>
 6 | <line x1="11" y1="49.5" x2="338" y2="49.5" stroke="#E4E4E7"/>
 7 | <rect x="11" y="50" width="327" height="126" rx="8" fill="white"/>
 8 | <rect x="23" y="74" width="303" height="10" rx="3" fill="#E5E7EB"/>
 9 | <rect x="23" y="96" width="303" height="10" rx="3" fill="#E5E7EB"/>
10 | <rect x="23" y="118" width="269" height="10" rx="3" fill="#E5E7EB"/>
11 | <rect x="23" y="142" width="157" height="10" rx="3" fill="#E5E7EB"/>
12 | <line x1="11" y1="175.5" x2="338" y2="175.5" stroke="#E4E4E7"/>
13 | <rect x="232" y="188" width="41" height="19" rx="2" fill="#1A56DB"/>
14 | <rect x="285" y="188" width="41" height="19" rx="2" fill="#D1D5DB"/>
15 | <rect x="10.5" y="10.5" width="328" height="209" rx="8.5" stroke="#D1D5DB"/>
16 | </g>
17 | <defs>
18 | <filter id="filter0_dd_1864_2045" x="4" y="8" width="341" height="222" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
19 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
20 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
21 | <feOffset dy="4"/>
22 | <feGaussianBlur stdDeviation="3"/>
23 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
24 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1864_2045"/>
25 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
26 | <feOffset dy="2"/>
27 | <feGaussianBlur stdDeviation="2"/>
28 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
29 | <feBlend mode="normal" in2="effect1_dropShadow_1864_2045" result="effect2_dropShadow_1864_2045"/>
30 | <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1864_2045" result="shape"/>
31 | </filter>
32 | </defs>
33 | </svg>
34 | 


--------------------------------------------------------------------------------
/src/routes/badges.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { Badge } from '$lib';
 3 | 
 4 |   import Card from '$lib/Card/Card.svelte';
 5 |   import { HiClockSolid, HiCheckOutline } from 'svelte-icons/hi';
 6 |   import { HighlightSvelte } from 'svelte-highlight';
 7 | </script>
 8 | 
 9 | <div class="mx-auto flex max-w-4xl flex-col gap-8 dark:text-white">
10 |   <div class="flex flex-col gap-2">
11 |     <span class="text-2xl font-bold">Default badge</span>
12 |     <Card>
13 |       <div class="flex flex-wrap gap-2">
14 |         <Badge color="blue">Default</Badge>
15 |         <Badge color="gray">Dark</Badge>
16 |         <Badge color="red">Red</Badge>
17 |         <Badge color="green">Green</Badge>
18 |         <Badge color="yellow">Yellow</Badge>
19 |         <Badge color="indigo">Indigo</Badge>
20 |         <Badge color="purple">Purple</Badge>
21 |         <Badge color="pink">Pink</Badge>
22 |       </div>
23 |       <HighlightSvelte
24 |         code={`<div class="flex flex-wrap gap-2">
25 |   <Badge color="blue">Default</Badge>
26 |   <Badge color="gray">Dark</Badge>
27 |   <Badge color="red">Red</Badge>
28 |   <Badge color="green">Green</Badge>
29 |   <Badge color="yellow">Yellow</Badge>
30 |   <Badge color="indigo">Indigo</Badge>
31 |   <Badge color="purple">Purple</Badge>
32 |   <Badge color="pink">Pink</Badge>
33 | </div>`}
34 |       />
35 |     </Card>
36 |   </div>
37 |   <div class="flex flex-col gap-2">
38 |     <span class="text-2xl font-bold">Large badge</span>
39 |     <Card>
40 |       <div class="flex flex-wrap gap-2">
41 |         <Badge color="blue" size="sm">Default</Badge>
42 |         <Badge color="gray" size="sm">Dark</Badge>
43 |         <Badge color="red" size="sm">Red</Badge>
44 |         <Badge color="green" size="sm">Green</Badge>
45 |         <Badge color="yellow" size="sm">Yellow</Badge>
46 |         <Badge color="indigo" size="sm">Indigo</Badge>
47 |         <Badge color="purple" size="sm">Purple</Badge>
48 |         <Badge color="pink" size="sm">Pink</Badge>
49 |       </div>
50 |       <HighlightSvelte
51 |         code={`<div class="flex flex-wrap gap-2">
52 |   <Badge color="blue" size="sm">Default</Badge>
53 |   <Badge color="gray" size="sm">Dark</Badge>
54 |   <Badge color="red" size="sm">Red</Badge>
55 |   <Badge color="green" size="sm">Green</Badge>
56 |   <Badge color="yellow" size="sm">Yellow</Badge>
57 |   <Badge color="indigo" size="sm">Indigo</Badge>
58 |   <Badge color="purple" size="sm">Purple</Badge>
59 |   <Badge color="pink" size="sm">Pink</Badge>
60 | </div>`}
61 |       />
62 |     </Card>
63 |   </div>
64 |   <div class="flex flex-col gap-2">
65 |     <span class="text-2xl font-bold">Badges with icon</span>
66 |     <Card>
67 |       <div class="flex flex-wrap gap-2">
68 |         <Badge icon={HiCheckOutline}>2 minutes ago</Badge>
69 |         <Badge color="gray" icon={HiClockSolid}>3 days ago</Badge>
70 |       </div>
71 |       <HighlightSvelte
72 |         code={`<div class="flex flex-wrap gap-2">
73 |   <Badge icon={HiCheckOutline}>2 minutes ago</Badge>
74 |   <Badge color="gray" icon={HiClockSolid}>3 days ago</Badge>
75 | </div>`}
76 |       />
77 |     </Card>
78 |   </div>
79 |   <div class="flex flex-col gap-2">
80 |     <span class="text-2xl font-bold">Badges with icon only</span>
81 |     <Card>
82 |       <div class="flex flex-wrap items-center gap-2">
83 |         <Badge icon={HiCheckOutline} />
84 |         <Badge color="gray" icon={HiCheckOutline} />
85 |         <Badge size="sm" icon={HiCheckOutline} />
86 |         <Badge color="gray" size="sm" icon={HiCheckOutline} />
87 |       </div>
88 |       <HighlightSvelte
89 |         code={`<div class="flex flex-wrap items-center gap-2">
90 |   <Badge icon={HiCheckOutline} />
91 |   <Badge color="gray" icon={HiCheckOutline} />
92 |   <Badge size="sm" icon={HiCheckOutline} />
93 |   <Badge color="gray" size="sm" icon={HiCheckOutline} />
94 | </div>`}
95 |       />
96 |     </Card>
97 |   </div>
98 | </div>
99 | 


--------------------------------------------------------------------------------
/src/routes/tooltips.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { Tooltip, Button } from '$lib';
  3 | 
  4 |   import Card from '$lib/Card/Card.svelte';
  5 |   import { HiHomeSolid } from 'svelte-icons/hi';
  6 |   import { HighlightSvelte } from 'svelte-highlight';
  7 | </script>
  8 | 
  9 | <div class="mx-auto flex max-w-4xl flex-col gap-8 dark:text-white">
 10 |   <div class="flex flex-col gap-2">
 11 |     <span class="text-2xl font-bold">Using tooltips </span>
 12 |     <Card>
 13 |       <Tooltip content="Tooltip content">
 14 |         <Button>Default tooltip</Button>
 15 |       </Tooltip>
 16 |       <HighlightSvelte
 17 |         code={`<Tooltip content="Tooltip content">
 18 |   <Button>Default tooltip</Button>
 19 | </Tooltip>`}
 20 |       />
 21 |     </Card>
 22 |   </div>
 23 |   <div class="flex flex-col gap-2">
 24 |     <span class="text-2xl font-bold">Tooltip styles</span>
 25 |     <Card>
 26 |       <div class="flex gap-2">
 27 |         <Tooltip content="Tooltip content" style="light">
 28 |           <Button>Light tooltip</Button>
 29 |         </Tooltip>
 30 |         <Tooltip content="Tooltip content" style="dark">
 31 |           <Button>Dark tooltip</Button>
 32 |         </Tooltip>
 33 |       </div>
 34 |       <HighlightSvelte
 35 |         code={`<div class="flex gap-2">
 36 |   <Tooltip content="Tooltip content" style="light">
 37 |     <Button>Light tooltip</Button>
 38 |   </Tooltip>
 39 |   <Tooltip content="Tooltip content" style="dark">
 40 |     <Button>Dark tooltip</Button>
 41 |   </Tooltip>
 42 | </div>`}
 43 |       />
 44 |     </Card>
 45 |   </div>
 46 |   <div class="flex flex-col gap-2">
 47 |     <span class="text-2xl font-bold">Placement</span>
 48 |     <Card>
 49 |       <div class="flex gap-2">
 50 |         <Tooltip content="Tooltip content" placement="top">
 51 |           <Button>Tooltip top</Button>
 52 |         </Tooltip>
 53 |         <Tooltip content="Tooltip content" placement="right">
 54 |           <Button>Tooltip right</Button>
 55 |         </Tooltip>
 56 |         <Tooltip content="Tooltip content" placement="bottom">
 57 |           <Button>Tooltip bottom</Button>
 58 |         </Tooltip>
 59 |         <Tooltip content="Tooltip content" placement="left">
 60 |           <Button>Tooltip left</Button>
 61 |         </Tooltip>
 62 |       </div>
 63 |       <HighlightSvelte
 64 |         code={`<div class="flex gap-2">
 65 |   <Tooltip content="Tooltip content" placement="top">
 66 |     <Button>Tooltip top</Button>
 67 |   </Tooltip>
 68 |   <Tooltip content="Tooltip content" placement="right">
 69 |     <Button>Tooltip right</Button>
 70 |   </Tooltip>
 71 |   <Tooltip content="Tooltip content" placement="bottom">
 72 |     <Button>Tooltip bottom</Button>
 73 |   </Tooltip>
 74 |   <Tooltip content="Tooltip content" placement="left">
 75 |     <Button>Tooltip left</Button>
 76 |   </Tooltip>
 77 | </div>`}
 78 |       />
 79 |     </Card>
 80 |   </div>
 81 |   <div class="flex flex-col gap-2">
 82 |     <span class="text-2xl font-bold">Triggering</span>
 83 |     <Card>
 84 |       <div class="flex gap-2">
 85 |         <Tooltip content="Tooltip content" trigger="hover">
 86 |           <Button>Tooltip hover</Button>
 87 |         </Tooltip>
 88 |         <Tooltip content="Tooltip content" trigger="click">
 89 |           <Button>Tooltip click</Button>
 90 |         </Tooltip>
 91 |       </div>
 92 |       <HighlightSvelte
 93 |         code={`<div class="flex gap-2">
 94 |   <Tooltip content="Tooltip content" trigger="hover">
 95 |     <Button>Tooltip hover</Button>
 96 |   </Tooltip>
 97 |   <Tooltip content="Tooltip content" trigger="click">
 98 |     <Button>Tooltip click</Button>
 99 |   </Tooltip>
100 | </div>`}
101 |       />
102 |     </Card>
103 |   </div>
104 |   <div class="flex flex-col gap-2">
105 |     <span class="text-2xl font-bold">Disable arrow</span>
106 |     <Card>
107 |       <Tooltip content="Tooltip content" arrow={false}>
108 |         <Button>Default tooltip</Button>
109 |       </Tooltip>
110 |       <HighlightSvelte
111 |         code={`<Tooltip content="Tooltip content" arrow={false}>
112 |   <Button>Default tooltip</Button>
113 | </Tooltip>`}
114 |       />
115 |     </Card>
116 |   </div>
117 | </div>
118 | 


--------------------------------------------------------------------------------
/src/routes/progress.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { Progress } from '$lib';
 3 | 
 4 |   import Card from '$lib/Card/Card.svelte';
 5 |   import { HighlightSvelte } from 'svelte-highlight';
 6 | </script>
 7 | 
 8 | <div class="mx-auto flex max-w-4xl flex-col gap-8 dark:text-white">
 9 |   <div class="flex flex-col gap-2">
10 |     <span class="text-2xl font-bold">Default Progress</span>
11 |     <Card>
12 |       <Progress progress={45} />
13 |       <HighlightSvelte code={`<Progress progress={45} />`} />
14 |     </Card>
15 |   </div>
16 |   <div class="flex flex-col gap-2">
17 |     <span class="text-2xl font-bold">Sizing</span>
18 |     <Card>
19 |       <div class="flex flex-col gap-2">
20 |         <div class="text-base font-medium dark:text-white">Small</div>
21 |         <Progress progress={45} size="sm" color="dark" />
22 |         <div class="text-base font-medium dark:text-white">Default</div>
23 |         <Progress progress={45} size="md" color="dark" />
24 |         <div class="text-lg font-medium dark:text-white">Large</div>
25 |         <Progress progress={45} size="lg" color="dark" />
26 |         <div class="text-lg font-medium dark:text-white">Extra Large</div>
27 |         <Progress progress={45} size="xl" color="dark" />
28 |       </div>
29 |       <HighlightSvelte
30 |         code={`<div class="flex flex-col gap-2">
31 |   <div class="text-base font-medium dark:text-white">Small</div>
32 |   <Progress progress={45} size="sm" color="dark" />
33 |   <div class="text-base font-medium dark:text-white">Default</div>
34 |   <Progress progress={45} size="md" color="dark" />
35 |   <div class="text-lg font-medium dark:text-white">Large</div>
36 |   <Progress progress={45} size="lg" color="dark" />
37 |   <div class="text-lg font-medium dark:text-white">Extra Large</div>
38 |   <Progress progress={45} size="xl" color="dark" />
39 | </div>`}
40 |       />
41 |     </Card>
42 |   </div>
43 |   <div class="flex flex-col gap-2">
44 |     <span class="text-2xl font-bold">Colors</span>
45 |     <Card>
46 |       <div class="flex flex-col gap-2">
47 |         <div class="text-base font-medium">Dark</div>
48 |         <Progress progress={45} color="dark" />
49 |         <div class="text-base font-medium text-blue-700">Blue</div>
50 |         <Progress progress={45} color="blue" />
51 |         <div class="text-base font-medium text-red-700">Red</div>
52 |         <Progress progress={45} color="red" />
53 |         <div class="text-base font-medium text-green-700">Green</div>
54 |         <Progress progress={45} color="green" />
55 |         <div class="text-base font-medium text-yellow-700">Yellow</div>
56 |         <Progress progress={45} color="yellow" />
57 |         <div class="text-base font-medium text-indigo-700">Indigo</div>
58 |         <Progress progress={45} color="indigo" />
59 |         <div class="text-base font-medium text-purple-700">Purple</div>
60 |         <Progress progress={45} color="purple" />
61 |       </div>
62 |       <HighlightSvelte
63 |         code={`<div class="flex flex-col gap-2">
64 |   <div class="text-base font-medium">Dark</div>
65 |   <Progress progress={45} color="dark" />
66 |   <div class="text-base font-medium text-blue-700">Blue</div>
67 |   <Progress progress={45} color="blue" />
68 |   <div class="text-base font-medium text-red-700">Red</div>
69 |   <Progress progress={45} color="red" />
70 |   <div class="text-base font-medium text-green-700">Green</div>
71 |   <Progress progress={45} color="green" />
72 |   <div class="text-base font-medium text-yellow-700">Yellow</div>
73 |   <Progress progress={45} color="yellow" />
74 |   <div class="text-base font-medium text-indigo-700">Indigo</div>
75 |   <Progress progress={45} color="indigo" />
76 |   <div class="text-base font-medium text-purple-700">Purple</div>
77 |   <Progress progress={45} color="purple" />
78 | </div>`}
79 |       />
80 |     </Card>
81 |   </div>
82 |   <div class="flex flex-col gap-2">
83 |     <span class="text-2xl font-bold">With labels inside</span>
84 |     <Card>
85 |       <Progress progress={50} label="Flowbite" size="lg" />
86 |       <HighlightSvelte code={`<Progress progress={50} label="Flowbite" size="lg" />`} />
87 |     </Card>
88 |   </div>
89 |   <div class="flex flex-col gap-2">
90 |     <span class="text-2xl font-bold">With labels outside</span>
91 |     <Card>
92 |       <Progress progress={45} label="Flowbite" labelPosition="outside" labelProgress={true} />
93 |       <HighlightSvelte
94 |         code={`<Progress progress={45} label="Flowbite" labelPosition="outside" labelProgress={true} />`}
95 |       />
96 |     </Card>
97 |   </div>
98 | </div>
99 | 


--------------------------------------------------------------------------------
/src/routes/spinners.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { Spinner, Button } from '$lib';
  3 | 
  4 |   import Card from '$lib/Card/Card.svelte';
  5 |   import { HighlightSvelte } from 'svelte-highlight';
  6 | </script>
  7 | 
  8 | <div class="mx-auto flex max-w-4xl flex-col gap-8 dark:text-white">
  9 |   <div class="flex flex-col gap-2">
 10 |     <span class="text-2xl font-bold">Default spinner </span>
 11 |     <Card>
 12 |       <Spinner aria-label="Default status example" />
 13 |       <HighlightSvelte code={`<Spinner aria-label="Default status example" />`} />
 14 |     </Card>
 15 |   </div>
 16 |   <div class="flex flex-col gap-2">
 17 |     <span class="text-2xl font-bold">Colors </span>
 18 |     <Card>
 19 |       <div class="flex flex-wrap gap-2">
 20 |         <Spinner color="blue" aria-label="Blue spinner example" />
 21 |         <Spinner color="green" aria-label="Green spinner example" />
 22 |         <Spinner color="red" aria-label="Red spinner example" />
 23 |         <Spinner color="yellow" aria-label="Yellow spinner example" />
 24 |         <Spinner color="pink" aria-label="Pink spinner example" />
 25 |         <Spinner color="purple" aria-label="Purple spinner example" />
 26 |       </div>
 27 |       <HighlightSvelte
 28 |         code={`<div class="flex flex-wrap gap-2">
 29 |   <Spinner color="blue" aria-label="Blue spinner example" />
 30 |   <Spinner color="green" aria-label="Green spinner example" />
 31 |   <Spinner color="red" aria-label="Red spinner example" />
 32 |   <Spinner color="yellow" aria-label="Yellow spinner example" />
 33 |   <Spinner color="pink" aria-label="Pink spinner example" />
 34 |   <Spinner color="purple" aria-label="Purple spinner example" />
 35 | </div>`}
 36 |       />
 37 |     </Card>
 38 |   </div>
 39 |   <div class="flex flex-col gap-2">
 40 |     <span class="text-2xl font-bold">Sizing </span>
 41 |     <Card>
 42 |       <div class="flex flex-wrap items-center gap-2">
 43 |         <Spinner aria-label="Extra small spinner example" size="xs" />
 44 |         <Spinner aria-label="Small spinner example" size="sm" />
 45 |         <Spinner aria-label="Medium sized spinner example" size="md" />
 46 |         <Spinner aria-label="Large spinner example" size="lg" />
 47 |         <Spinner aria-label="Extra large spinner example" size="xl" />
 48 |       </div>
 49 |       <HighlightSvelte
 50 |         code={`<div class="flex flex-wrap items-center gap-2">
 51 |   <Spinner aria-label="Extra small spinner example" size="xs" />
 52 |   <Spinner aria-label="Small spinner example" size="sm" />
 53 |   <Spinner aria-label="Medium sized spinner example" size="md" />
 54 |   <Spinner aria-label="Large spinner example" size="lg" />
 55 |   <Spinner aria-label="Extra large spinner example" size="xl" />
 56 | </div>`}
 57 |       />
 58 |     </Card>
 59 |   </div>
 60 |   <div class="flex flex-col gap-2">
 61 |     <span class="text-2xl font-bold">Alignment </span>
 62 |     <Card>
 63 |       <div class="flex flex-col gap-2">
 64 |         <div class="text-left">
 65 |           <Spinner aria-label="Left-aligned spinner example" />
 66 |         </div>
 67 |         <div class="text-center">
 68 |           <Spinner aria-label="Center-aligned spinner example" />
 69 |         </div>
 70 |         <div class="text-right">
 71 |           <Spinner aria-label="Right-aligned spinner example" />
 72 |         </div>
 73 |       </div>
 74 |       <HighlightSvelte
 75 |         code={`<div class="flex flex-col gap-2">
 76 |   <div class="text-left">
 77 |     <Spinner aria-label="Left-aligned spinner example" />
 78 |   </div>
 79 |   <div class="text-center">
 80 |     <Spinner aria-label="Center-aligned spinner example" />
 81 |   </div>
 82 |   <div class="text-right">
 83 |     <Spinner aria-label="Right-aligned spinner example" />
 84 |   </div>
 85 | </div>`}
 86 |       />
 87 |     </Card>
 88 |   </div>
 89 |   <div class="flex flex-col gap-2">
 90 |     <span class="text-2xl font-bold">Buttons </span>
 91 |     <Card>
 92 |       <div class="flex flex-row gap-3">
 93 |         <Button>
 94 |           <Spinner aria-label="Spinner button example" />
 95 |           <span class="pl-3"> Loading... </span>
 96 |         </Button>
 97 |         <Button color="alternative">
 98 |           <Spinner aria-label="Alternate spinner button example" />
 99 |           <span class="pl-3"> Loading... </span>
100 |         </Button>
101 |       </div>
102 |       <HighlightSvelte
103 |         code={`<div class="flex flex-row gap-3">
104 |   <Button>
105 |     <Spinner aria-label="Spinner button example" />
106 |     <span class="pl-3"> Loading... </span>
107 |   </Button>
108 |   <Button color="alternative">
109 |     <Spinner aria-label="Alternate spinner button example" />
110 |     <span class="pl-3"> Loading... </span>
111 |   </Button>
112 | </div>`}
113 |       />
114 |     </Card>
115 |   </div>
116 | </div>
117 | 


--------------------------------------------------------------------------------
/static/images/accordion-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="398" height="200" viewBox="0 0 398 200" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <g filter="url(#filter0_dd_2407_3180)">
 3 |         <g clip-path="url(#clip0_2407_3180)">
 4 |             <rect x="6" y="2" width="386" height="188" rx="8" fill="#374151"/>
 5 |             <rect x="27" y="19.5" width="140" height="8" rx="2" fill="#9CA3AF"/>
 6 |             <path fill-rule="evenodd" clip-rule="evenodd"
 7 |                   d="M363.501 25.801C363.342 25.9603 363.125 26.0498 362.9 26.0498C362.675 26.0498 362.459 25.9603 362.299 25.801L359.5 23.0019L356.701 25.801C356.541 25.9558 356.326 26.0415 356.103 26.0395C355.88 26.0376 355.667 25.9482 355.509 25.7906C355.352 25.633 355.262 25.4198 355.261 25.197C355.259 24.9741 355.344 24.7594 355.499 24.5991L358.899 21.1991C359.059 21.0397 359.275 20.9502 359.5 20.9502C359.725 20.9502 359.942 21.0397 360.101 21.1991L363.501 24.5991C363.66 24.7585 363.75 24.9746 363.75 25.2C363.75 25.4254 363.66 25.6416 363.501 25.801Z"
 8 |                   fill="#9CA3AF"/>
 9 |             <rect x="27" y="52" width="331" height="6" rx="1" fill="#6B7280"/>
10 |             <rect x="27" y="63" width="300.688" height="6" rx="1" fill="#6B7280"/>
11 |             <rect x="27" y="74" width="315.297" height="6" rx="1" fill="#6B7280"/>
12 |             <rect x="27" y="85" width="157.066" height="6" rx="1" fill="#6B7280"/>
13 |             <line x1="6" y1="103.5" x2="392" y2="103.5" stroke="#4B5563"/>
14 |             <rect x="27" y="121.5" width="99" height="8" rx="2" fill="#9CA3AF"/>
15 |             <path fill-rule="evenodd" clip-rule="evenodd"
16 |                   d="M355.499 123.199C355.658 123.04 355.875 122.95 356.1 122.95C356.325 122.95 356.541 123.04 356.701 123.199L359.5 125.998L362.299 123.199C362.377 123.118 362.471 123.053 362.575 123.008C362.679 122.964 362.79 122.94 362.903 122.939C363.016 122.939 363.128 122.96 363.232 123.003C363.337 123.045 363.432 123.109 363.511 123.188C363.591 123.268 363.654 123.363 363.697 123.468C363.74 123.572 363.761 123.684 363.76 123.797C363.759 123.91 363.736 124.021 363.691 124.125C363.647 124.229 363.582 124.322 363.501 124.401L360.101 127.801C359.941 127.96 359.725 128.05 359.5 128.05C359.275 128.05 359.058 127.96 358.899 127.801L355.499 124.401C355.34 124.241 355.25 124.025 355.25 123.8C355.25 123.575 355.34 123.358 355.499 123.199Z"
17 |                   fill="#9CA3AF"/>
18 |             <line x1="6" y1="146.5" x2="392" y2="146.5" stroke="#4B5563"/>
19 |             <line x1="6" y1="146.5" x2="392" y2="146.5" stroke="#4B5563"/>
20 |             <rect x="27" y="164.5" width="115" height="8" rx="2" fill="#9CA3AF"/>
21 |             <path fill-rule="evenodd" clip-rule="evenodd"
22 |                   d="M355.499 166.199C355.658 166.04 355.875 165.95 356.1 165.95C356.325 165.95 356.541 166.04 356.701 166.199L359.5 168.998L362.299 166.199C362.377 166.118 362.471 166.053 362.575 166.008C362.679 165.964 362.79 165.94 362.903 165.939C363.016 165.939 363.128 165.96 363.232 166.003C363.337 166.045 363.432 166.109 363.511 166.188C363.591 166.268 363.654 166.363 363.697 166.468C363.74 166.572 363.761 166.684 363.76 166.797C363.759 166.91 363.736 167.021 363.691 167.125C363.647 167.229 363.582 167.322 363.501 167.401L360.101 170.801C359.941 170.96 359.725 171.05 359.5 171.05C359.275 171.05 359.058 170.96 358.899 170.801L355.499 167.401C355.34 167.241 355.25 167.025 355.25 166.8C355.25 166.575 355.34 166.358 355.499 166.199Z"
23 |                   fill="#9CA3AF"/>
24 |         </g>
25 |         <rect x="6.5" y="2.5" width="385" height="187" rx="7.5" stroke="#4B5563"/>
26 |     </g>
27 |     <defs>
28 |         <filter id="filter0_dd_2407_3180" x="0" y="0" width="398" height="200"
29 |                 color-interpolation-filters="sRGB">
30 |             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
31 |             <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
32 |                            result="hardAlpha"/>
33 |             <feOffset dy="4"/>
34 |             <feGaussianBlur stdDeviation="3"/>
35 |             <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
36 |             <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_2407_3180"/>
37 |             <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
38 |                            result="hardAlpha"/>
39 |             <feOffset dy="2"/>
40 |             <feGaussianBlur stdDeviation="2"/>
41 |             <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
42 |             <feBlend in2="effect1_dropShadow_2407_3180" result="effect2_dropShadow_2407_3180"/>
43 |             <feBlend in="SourceGraphic" in2="effect2_dropShadow_2407_3180" result="shape"/>
44 |         </filter>
45 |         <clipPath id="clip0_2407_3180">
46 |             <rect x="6" y="2" width="386" height="188" rx="8" fill="white"/>
47 |         </clipPath>
48 |     </defs>
49 | </svg>
50 | 


--------------------------------------------------------------------------------
/static/images/accordion-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="398" height="200" viewBox="0 0 398 200" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <g filter="url(#filter0_dd_2407_3103)">
 3 |         <g clip-path="url(#clip0_2407_3103)">
 4 |             <rect x="6" y="2" width="386" height="188" rx="8" fill="white"/>
 5 |             <rect x="27" y="19.5" width="140" height="8" rx="2" fill="#D1D5DB"/>
 6 |             <path fill-rule="evenodd" clip-rule="evenodd"
 7 |                   d="M363.501 25.801C363.342 25.9603 363.125 26.0498 362.9 26.0498C362.675 26.0498 362.458 25.9603 362.299 25.801L359.5 23.0019L356.701 25.801C356.541 25.9558 356.326 26.0415 356.103 26.0395C355.88 26.0376 355.667 25.9482 355.509 25.7906C355.352 25.633 355.262 25.4198 355.26 25.197C355.259 24.9741 355.344 24.7594 355.499 24.5991L358.899 21.1991C359.058 21.0397 359.275 20.9502 359.5 20.9502C359.725 20.9502 359.942 21.0397 360.101 21.1991L363.501 24.5991C363.66 24.7585 363.75 24.9746 363.75 25.2C363.75 25.4254 363.66 25.6416 363.501 25.801Z"
 8 |                   fill="#D1D5DB"/>
 9 |             <rect x="27" y="52" width="331" height="6" rx="1" fill="#E5E7EB"/>
10 |             <rect x="27" y="63" width="300.688" height="6" rx="1" fill="#E5E7EB"/>
11 |             <rect x="27" y="74" width="315.297" height="6" rx="1" fill="#E5E7EB"/>
12 |             <rect x="27" y="85" width="157.066" height="6" rx="1" fill="#E5E7EB"/>
13 |             <line x1="6" y1="103.5" x2="392" y2="103.5" stroke="#E4E4E7"/>
14 |             <rect x="27" y="121.5" width="99" height="8" rx="2" fill="#D1D5DB"/>
15 |             <path fill-rule="evenodd" clip-rule="evenodd"
16 |                   d="M355.499 123.199C355.658 123.04 355.875 122.95 356.1 122.95C356.325 122.95 356.542 123.04 356.701 123.199L359.5 125.998L362.299 123.199C362.377 123.118 362.471 123.053 362.575 123.008C362.679 122.964 362.79 122.94 362.903 122.939C363.016 122.939 363.128 122.96 363.232 123.003C363.337 123.045 363.432 123.109 363.511 123.188C363.591 123.268 363.654 123.363 363.697 123.468C363.74 123.572 363.761 123.684 363.76 123.797C363.759 123.91 363.736 124.021 363.691 124.125C363.647 124.229 363.582 124.322 363.501 124.401L360.101 127.801C359.942 127.96 359.725 128.05 359.5 128.05C359.275 128.05 359.058 127.96 358.899 127.801L355.499 124.401C355.34 124.241 355.25 124.025 355.25 123.8C355.25 123.575 355.34 123.358 355.499 123.199Z"
17 |                   fill="#D1D5DB"/>
18 |             <line x1="6" y1="146.5" x2="392" y2="146.5" stroke="#E4E4E7"/>
19 |             <line x1="6" y1="146.5" x2="392" y2="146.5" stroke="#E4E4E7"/>
20 |             <rect x="27" y="164.5" width="115" height="8" rx="2" fill="#D1D5DB"/>
21 |             <path fill-rule="evenodd" clip-rule="evenodd"
22 |                   d="M355.499 166.199C355.658 166.04 355.875 165.95 356.1 165.95C356.325 165.95 356.542 166.04 356.701 166.199L359.5 168.998L362.299 166.199C362.377 166.118 362.471 166.053 362.575 166.008C362.679 165.964 362.79 165.94 362.903 165.939C363.016 165.939 363.128 165.96 363.232 166.003C363.337 166.045 363.432 166.109 363.511 166.188C363.591 166.268 363.654 166.363 363.697 166.468C363.74 166.572 363.761 166.684 363.76 166.797C363.759 166.91 363.736 167.021 363.691 167.125C363.647 167.229 363.582 167.322 363.501 167.401L360.101 170.801C359.942 170.96 359.725 171.05 359.5 171.05C359.275 171.05 359.058 170.96 358.899 170.801L355.499 167.401C355.34 167.241 355.25 167.025 355.25 166.8C355.25 166.575 355.34 166.358 355.499 166.199Z"
23 |                   fill="#D1D5DB"/>
24 |         </g>
25 |         <rect x="6.5" y="2.5" width="385" height="187" rx="7.5" stroke="#D4D4D8"/>
26 |     </g>
27 |     <defs>
28 |         <filter id="filter0_dd_2407_3103" x="0" y="0" width="398" height="200"
29 |                 color-interpolation-filters="sRGB">
30 |             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
31 |             <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
32 |                            result="hardAlpha"/>
33 |             <feOffset dy="4"/>
34 |             <feGaussianBlur stdDeviation="3"/>
35 |             <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
36 |             <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_2407_3103"/>
37 |             <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
38 |                            result="hardAlpha"/>
39 |             <feOffset dy="2"/>
40 |             <feGaussianBlur stdDeviation="2"/>
41 |             <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
42 |             <feBlend in2="effect1_dropShadow_2407_3103" result="effect2_dropShadow_2407_3103"/>
43 |             <feBlend in="SourceGraphic" in2="effect2_dropShadow_2407_3103" result="shape"/>
44 |         </filter>
45 |         <clipPath id="clip0_2407_3103">
46 |             <rect x="6" y="2" width="386" height="188" rx="8" fill="white"/>
47 |         </clipPath>
48 |     </defs>
49 | </svg>
50 | 


--------------------------------------------------------------------------------
/src/lib/Tooltip/Tooltip.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import classNames from 'classnames';
  3 |   import { browser } from '$app/env';
  4 |   import { clickOutside } from '$lib/clickOutside';
  5 |   import {
  6 |     computePosition,
  7 |     flip,
  8 |     shift,
  9 |     offset,
 10 |     autoPlacement,
 11 |     arrow as arrowFloat,
 12 |     type ComputePositionReturn,
 13 |   } from '@floating-ui/dom';
 14 |   import type { Placement } from '@floating-ui/dom';
 15 |   import { onDestroy } from 'svelte';
 16 | 
 17 |   export let placement: 'auto' | Placement = 'top';
 18 |   export let trigger: 'hover' | 'click' = 'hover';
 19 |   export let style: 'dark' | 'light' | 'auto' = 'dark';
 20 |   export let content: string = '';
 21 |   export let animation: false | `duration-${number}` = 'duration-300';
 22 |   export let arrow: boolean = true;
 23 | 
 24 |   let open = false;
 25 | 
 26 |   const floatingPlacement = ({ placement }: { placement: 'auto' | Placement }): Placement | undefined => {
 27 |     return placement === 'auto' ? undefined : placement;
 28 |   };
 29 | 
 30 |   const floatingArrowPlacement = ({ placement }: { placement: Placement }): Placement => {
 31 |     if (!placement) {
 32 |       return 'top';
 33 |     }
 34 |     return {
 35 |       top: 'bottom',
 36 |       right: 'left',
 37 |       bottom: 'top',
 38 |       left: 'right',
 39 |     }[placement.split('-')[0]] as Placement;
 40 |   };
 41 | 
 42 |   const floatingMiddleware = ({ arrowRef, placement }: { arrowRef: any; placement: 'auto' | Placement }) => {
 43 |     const middleware = [];
 44 | 
 45 |     middleware.push(offset(8));
 46 |     middleware.push(placement === 'auto' ? autoPlacement() : flip());
 47 |     middleware.push(shift({ padding: 8 }));
 48 | 
 49 |     if (arrowRef) {
 50 |       middleware.push(arrowFloat({ element: arrowRef }));
 51 |     }
 52 | 
 53 |     return middleware;
 54 |   };
 55 | 
 56 |   let placementData: ComputePositionReturn;
 57 |   let tooltipRef: HTMLElement, triggerRef: HTMLElement, arrowRef: HTMLElement;
 58 | 
 59 |   const updatePosition = () =>
 60 |     computePosition(triggerRef as Element, tooltipRef as Element, {
 61 |       middleware: floatingMiddleware({ arrowRef, placement }),
 62 |       placement: floatingPlacement({ placement }),
 63 |     }).then((data) => (placementData = data));
 64 | 
 65 |   let attachedScroll: boolean = false;
 66 |   $: browser && tooltipRef && open && updatePosition();
 67 |   $: {
 68 |     if (browser && open && !attachedScroll) {
 69 |       attachedScroll = true;
 70 |       window.addEventListener('scroll', updatePosition, true);
 71 |     } else if (!open && attachedScroll) {
 72 |       attachedScroll = false;
 73 |       window.removeEventListener('scroll', updatePosition, true);
 74 |     }
 75 |   }
 76 | 
 77 |   onDestroy(() => {
 78 |     if (attachedScroll) {
 79 |       attachedScroll = false;
 80 |       window.removeEventListener('scroll', updatePosition, true);
 81 |     }
 82 |   });
 83 | </script>
 84 | 
 85 | <svelte:window on:resize={() => open && updatePosition()} />
 86 | 
 87 | <div>
 88 |   <div
 89 |     class="w-fit"
 90 |     bind:this={triggerRef}
 91 |     on:mouseenter={() => {
 92 |       if (trigger === 'hover') {
 93 |         open = true;
 94 |       }
 95 |     }}
 96 |     on:mouseleave={() => {
 97 |       if (open && trigger === 'hover') {
 98 |         open = false;
 99 |       }
100 |     }}
101 |     on:click={() => {
102 |       if (trigger === 'click') {
103 |         open = !open;
104 |       }
105 |     }}
106 |     use:clickOutside={() => {
107 |       if (open) {
108 |         open = false;
109 |       }
110 |     }}
111 |   >
112 |     <slot />
113 |   </div>
114 | 
115 |   <div
116 |     bind:this={tooltipRef}
117 |     data-testid="tooltip"
118 |     class={classNames(
119 |       'absolute inline-block rounded-lg py-2 px-3 text-sm font-medium shadow-sm',
120 |       animation !== false && `transition-opacity ${animation}`,
121 |       {
122 |         'invisible opacity-0': !open,
123 |         'bg-gray-900 text-white dark:bg-gray-700': style === 'dark',
124 |         'border border-gray-200 bg-white text-gray-900': style === 'light',
125 |         'border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white':
126 |           style === 'auto',
127 |       },
128 |       $$props.class
129 |     )}
130 |     style={`left:${placementData?.x}px;top:${placementData?.y}px;position:${placementData?.strategy}`}
131 |   >
132 |     <div class="relative z-20">
133 |       <slot name="content">
134 |         {content}
135 |       </slot>
136 |     </div>
137 |     {#if arrow}
138 |       <div
139 |         class={classNames('absolute z-10 h-2 w-2 rotate-45', {
140 |           'bg-gray-900 dark:bg-gray-700': style === 'dark',
141 |           'bg-white': style === 'light',
142 |           'bg-white dark:bg-gray-700': style === 'auto',
143 |         })}
144 |         data-testid="tooltip-arrow"
145 |         style={`left:${placementData?.middlewareData.arrow?.x}px;top:${
146 |           placementData?.middlewareData.arrow?.y
147 |         }px;${floatingArrowPlacement({ placement: placementData?.placement })}:-4px`}
148 |         bind:this={arrowRef}
149 |       >
150 |         &nbsp;
151 |       </div>
152 |     {/if}
153 |   </div>
154 | </div>
155 | 


--------------------------------------------------------------------------------
/static/images/tabs-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="376" height="150" viewBox="0 0 376 150" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <path d="M0 8C0 3.58172 3.58172 0 8 0H106C110.418 0 114 3.58172 114 8V33C114 37.4183 110.418 41 106 41H8C3.58172 41 0 37.4183 0 33V8Z"
 3 |           fill="#1A56DB"/>
 4 |     <path d="M39.5568 17.3643H42.7038V26H44.5334V17.3643H47.6804V15.8182H39.5568V17.3643ZM50.3253 26.1541C51.5234 26.1541 52.2393 25.5923 52.5675 24.951H52.6271V26H54.3572V20.8892C54.3572 18.8707 52.7116 18.2642 51.255 18.2642C49.6491 18.2642 48.4162 18.9801 48.0185 20.3722L49.6989 20.6108C49.8778 20.0888 50.3849 19.6413 51.2649 19.6413C52.1001 19.6413 52.5575 20.0689 52.5575 20.8196V20.8494C52.5575 21.3665 52.0156 21.3913 50.6683 21.5355C49.1868 21.6946 47.7699 22.1371 47.7699 23.8572C47.7699 25.3587 48.8686 26.1541 50.3253 26.1541ZM50.7926 24.8317C50.0419 24.8317 49.505 24.4886 49.505 23.8274C49.505 23.1364 50.1065 22.848 50.9119 22.7337C51.3842 22.669 52.3288 22.5497 52.5625 22.3608V23.2607C52.5625 24.1108 51.8764 24.8317 50.7926 24.8317ZM56.2464 26H58.0163V24.7969H58.1207C58.4041 25.3537 58.9957 26.1342 60.3082 26.1342C62.108 26.1342 63.4553 24.7074 63.4553 22.1918C63.4553 19.6463 62.0682 18.2642 60.3033 18.2642C58.956 18.2642 58.3942 19.0746 58.1207 19.6264H58.0462V15.8182H56.2464V26ZM58.0114 22.1818C58.0114 20.7003 58.6477 19.7408 59.8061 19.7408C61.0043 19.7408 61.6207 20.7599 61.6207 22.1818C61.6207 23.6136 60.9943 24.6577 59.8061 24.6577C58.6577 24.6577 58.0114 23.6634 58.0114 22.1818ZM72.5794 15.8182H70.8244L68.2939 17.4439V19.1342L70.6752 17.6129H70.7349V26H72.5794V15.8182Z"
 5 |           fill="white"/>
 6 |     <path d="M166.057 17.8643H169.204V26.5H171.033V17.8643H174.18V16.3182H166.057V17.8643ZM176.825 26.6541C178.023 26.6541 178.739 26.0923 179.067 25.451H179.127V26.5H180.857V21.3892C180.857 19.3707 179.212 18.7642 177.755 18.7642C176.149 18.7642 174.916 19.4801 174.518 20.8722L176.199 21.1108C176.378 20.5888 176.885 20.1413 177.765 20.1413C178.6 20.1413 179.058 20.5689 179.058 21.3196V21.3494C179.058 21.8665 178.516 21.8913 177.168 22.0355C175.687 22.1946 174.27 22.6371 174.27 24.3572C174.27 25.8587 175.369 26.6541 176.825 26.6541ZM177.293 25.3317C176.542 25.3317 176.005 24.9886 176.005 24.3274C176.005 23.6364 176.607 23.348 177.412 23.2337C177.884 23.169 178.829 23.0497 179.062 22.8608V23.7607C179.062 24.6108 178.376 25.3317 177.293 25.3317ZM182.746 26.5H184.516V25.2969H184.621C184.904 25.8537 185.496 26.6342 186.808 26.6342C188.608 26.6342 189.955 25.2074 189.955 22.6918C189.955 20.1463 188.568 18.7642 186.803 18.7642C185.456 18.7642 184.894 19.5746 184.621 20.1264H184.546V16.3182H182.746V26.5ZM184.511 22.6818C184.511 21.2003 185.148 20.2408 186.306 20.2408C187.504 20.2408 188.121 21.2599 188.121 22.6818C188.121 24.1136 187.494 25.1577 186.306 25.1577C185.158 25.1577 184.511 24.1634 184.511 22.6818ZM194.938 26.5H201.918V24.9588H197.483V24.8892L199.238 23.1044C201.217 21.2053 201.764 20.2805 201.764 19.1321C201.764 17.4268 200.377 16.179 198.329 16.179C196.31 16.179 194.878 17.4318 194.878 19.3658H196.633C196.633 18.3267 197.29 17.6754 198.304 17.6754C199.273 17.6754 199.994 18.267 199.994 19.2266C199.994 20.0767 199.477 20.6832 198.473 21.7024L194.938 25.1676V26.5Z"
 7 |           fill="white"/>
 8 |     <path d="M297.057 17.8643H300.204V26.5H302.033V17.8643H305.18V16.3182H297.057V17.8643ZM307.825 26.6541C309.023 26.6541 309.739 26.0923 310.067 25.451H310.127V26.5H311.857V21.3892C311.857 19.3707 310.212 18.7642 308.755 18.7642C307.149 18.7642 305.916 19.4801 305.518 20.8722L307.199 21.1108C307.378 20.5888 307.885 20.1413 308.765 20.1413C309.6 20.1413 310.058 20.5689 310.058 21.3196V21.3494C310.058 21.8665 309.516 21.8913 308.168 22.0355C306.687 22.1946 305.27 22.6371 305.27 24.3572C305.27 25.8587 306.369 26.6541 307.825 26.6541ZM308.293 25.3317C307.542 25.3317 307.005 24.9886 307.005 24.3274C307.005 23.6364 307.607 23.348 308.412 23.2337C308.884 23.169 309.829 23.0497 310.062 22.8608V23.7607C310.062 24.6108 309.376 25.3317 308.293 25.3317ZM313.746 26.5H315.516V25.2969H315.621C315.904 25.8537 316.496 26.6342 317.808 26.6342C319.608 26.6342 320.955 25.2074 320.955 22.6918C320.955 20.1463 319.568 18.7642 317.803 18.7642C316.456 18.7642 315.894 19.5746 315.621 20.1264H315.546V16.3182H313.746V26.5ZM315.511 22.6818C315.511 21.2003 316.148 20.2408 317.306 20.2408C318.504 20.2408 319.121 21.2599 319.121 22.6818C319.121 24.1136 318.494 25.1577 317.306 25.1577C316.158 25.1577 315.511 24.1634 315.511 22.6818ZM329.592 26.6392C331.77 26.6392 333.356 25.3913 333.351 23.6712C333.356 22.3984 332.56 21.4837 331.133 21.2798V21.2003C332.237 20.9616 332.978 20.1413 332.973 18.9979C332.978 17.4467 331.655 16.179 329.622 16.179C327.643 16.179 326.112 17.3572 326.072 19.0625H327.847C327.877 18.2074 328.672 17.6754 329.612 17.6754C330.562 17.6754 331.193 18.2521 331.188 19.1072C331.193 19.9972 330.457 20.5888 329.403 20.5888H328.503V22.0107H329.403C330.691 22.0107 331.456 22.657 331.452 23.5767C331.456 24.4766 330.676 25.093 329.587 25.093C328.563 25.093 327.773 24.5611 327.728 23.7308H325.858C325.908 25.451 327.444 26.6392 329.592 26.6392Z"
 9 |           fill="white"/>
10 |     <rect y="66" width="376" height="12" rx="3" fill="#6B7280"/>
11 |     <rect y="90" width="376" height="12" rx="3" fill="#6B7280"/>
12 |     <rect y="114" width="376" height="12" rx="3" fill="#6B7280"/>
13 |     <rect y="138" width="181" height="12" rx="3" fill="#6B7280"/>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/static/images/tabs-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="376" height="150" viewBox="0 0 376 150" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <path d="M0 8C0 3.58172 3.58172 0 8 0H106C110.418 0 114 3.58172 114 8V33C114 37.4183 110.418 41 106 41H8C3.58172 41 0 37.4183 0 33V8Z"
 3 |           fill="#1A56DB"/>
 4 |     <path d="M39.5568 17.3643H42.7038V26H44.5334V17.3643H47.6804V15.8182H39.5568V17.3643ZM50.3253 26.1541C51.5234 26.1541 52.2393 25.5923 52.5675 24.951H52.6271V26H54.3572V20.8892C54.3572 18.8707 52.7116 18.2642 51.255 18.2642C49.6491 18.2642 48.4162 18.9801 48.0185 20.3722L49.6989 20.6108C49.8778 20.0888 50.3849 19.6413 51.2649 19.6413C52.1001 19.6413 52.5575 20.0689 52.5575 20.8196V20.8494C52.5575 21.3665 52.0156 21.3913 50.6683 21.5355C49.1868 21.6946 47.7699 22.1371 47.7699 23.8572C47.7699 25.3587 48.8686 26.1541 50.3253 26.1541ZM50.7926 24.8317C50.0419 24.8317 49.505 24.4886 49.505 23.8274C49.505 23.1364 50.1065 22.848 50.9119 22.7337C51.3842 22.669 52.3288 22.5497 52.5625 22.3608V23.2607C52.5625 24.1108 51.8764 24.8317 50.7926 24.8317ZM56.2464 26H58.0163V24.7969H58.1207C58.4041 25.3537 58.9957 26.1342 60.3082 26.1342C62.108 26.1342 63.4553 24.7074 63.4553 22.1918C63.4553 19.6463 62.0682 18.2642 60.3033 18.2642C58.956 18.2642 58.3942 19.0746 58.1207 19.6264H58.0462V15.8182H56.2464V26ZM58.0114 22.1818C58.0114 20.7003 58.6477 19.7408 59.8061 19.7408C61.0043 19.7408 61.6207 20.7599 61.6207 22.1818C61.6207 23.6136 60.9943 24.6577 59.8061 24.6577C58.6577 24.6577 58.0114 23.6634 58.0114 22.1818ZM72.5794 15.8182H70.8244L68.2939 17.4439V19.1342L70.6752 17.6129H70.7349V26H72.5794V15.8182Z"
 5 |           fill="white"/>
 6 |     <path d="M166.057 17.8643H169.204V26.5H171.033V17.8643H174.18V16.3182H166.057V17.8643ZM176.825 26.6541C178.023 26.6541 178.739 26.0923 179.067 25.451H179.127V26.5H180.857V21.3892C180.857 19.3707 179.212 18.7642 177.755 18.7642C176.149 18.7642 174.916 19.4801 174.518 20.8722L176.199 21.1108C176.378 20.5888 176.885 20.1413 177.765 20.1413C178.6 20.1413 179.058 20.5689 179.058 21.3196V21.3494C179.058 21.8665 178.516 21.8913 177.168 22.0355C175.687 22.1946 174.27 22.6371 174.27 24.3572C174.27 25.8587 175.369 26.6541 176.825 26.6541ZM177.293 25.3317C176.542 25.3317 176.005 24.9886 176.005 24.3274C176.005 23.6364 176.607 23.348 177.412 23.2337C177.884 23.169 178.829 23.0497 179.062 22.8608V23.7607C179.062 24.6108 178.376 25.3317 177.293 25.3317ZM182.746 26.5H184.516V25.2969H184.621C184.904 25.8537 185.496 26.6342 186.808 26.6342C188.608 26.6342 189.955 25.2074 189.955 22.6918C189.955 20.1463 188.568 18.7642 186.803 18.7642C185.456 18.7642 184.894 19.5746 184.621 20.1264H184.546V16.3182H182.746V26.5ZM184.511 22.6818C184.511 21.2003 185.148 20.2408 186.306 20.2408C187.504 20.2408 188.121 21.2599 188.121 22.6818C188.121 24.1136 187.494 25.1577 186.306 25.1577C185.158 25.1577 184.511 24.1634 184.511 22.6818ZM194.938 26.5H201.918V24.9588H197.483V24.8892L199.238 23.1044C201.217 21.2053 201.764 20.2805 201.764 19.1321C201.764 17.4268 200.377 16.179 198.329 16.179C196.31 16.179 194.878 17.4318 194.878 19.3658H196.633C196.633 18.3267 197.29 17.6754 198.304 17.6754C199.273 17.6754 199.994 18.267 199.994 19.2266C199.994 20.0767 199.477 20.6832 198.473 21.7024L194.938 25.1676V26.5Z"
 7 |           fill="#111928"/>
 8 |     <path d="M297.057 17.8643H300.204V26.5H302.033V17.8643H305.18V16.3182H297.057V17.8643ZM307.825 26.6541C309.023 26.6541 309.739 26.0923 310.067 25.451H310.127V26.5H311.857V21.3892C311.857 19.3707 310.212 18.7642 308.755 18.7642C307.149 18.7642 305.916 19.4801 305.518 20.8722L307.199 21.1108C307.378 20.5888 307.885 20.1413 308.765 20.1413C309.6 20.1413 310.058 20.5689 310.058 21.3196V21.3494C310.058 21.8665 309.516 21.8913 308.168 22.0355C306.687 22.1946 305.27 22.6371 305.27 24.3572C305.27 25.8587 306.369 26.6541 307.825 26.6541ZM308.293 25.3317C307.542 25.3317 307.005 24.9886 307.005 24.3274C307.005 23.6364 307.607 23.348 308.412 23.2337C308.884 23.169 309.829 23.0497 310.062 22.8608V23.7607C310.062 24.6108 309.376 25.3317 308.293 25.3317ZM313.746 26.5H315.516V25.2969H315.621C315.904 25.8537 316.496 26.6342 317.808 26.6342C319.608 26.6342 320.955 25.2074 320.955 22.6918C320.955 20.1463 319.568 18.7642 317.803 18.7642C316.456 18.7642 315.894 19.5746 315.621 20.1264H315.546V16.3182H313.746V26.5ZM315.511 22.6818C315.511 21.2003 316.148 20.2408 317.306 20.2408C318.504 20.2408 319.121 21.2599 319.121 22.6818C319.121 24.1136 318.494 25.1577 317.306 25.1577C316.158 25.1577 315.511 24.1634 315.511 22.6818ZM329.592 26.6392C331.77 26.6392 333.356 25.3913 333.351 23.6712C333.356 22.3984 332.56 21.4837 331.133 21.2798V21.2003C332.237 20.9616 332.978 20.1413 332.973 18.9979C332.978 17.4467 331.655 16.179 329.622 16.179C327.643 16.179 326.112 17.3572 326.072 19.0625H327.847C327.877 18.2074 328.672 17.6754 329.612 17.6754C330.562 17.6754 331.193 18.2521 331.188 19.1072C331.193 19.9972 330.457 20.5888 329.403 20.5888H328.503V22.0107H329.403C330.691 22.0107 331.456 22.657 331.452 23.5767C331.456 24.4766 330.676 25.093 329.587 25.093C328.563 25.093 327.773 24.5611 327.728 23.7308H325.858C325.908 25.451 327.444 26.6392 329.592 26.6392Z"
 9 |           fill="#111928"/>
10 |     <rect y="66" width="376" height="12" rx="3" fill="#E5E7EB"/>
11 |     <rect y="90" width="376" height="12" rx="3" fill="#E5E7EB"/>
12 |     <rect y="114" width="376" height="12" rx="3" fill="#E5E7EB"/>
13 |     <rect y="138" width="181" height="12" rx="3" fill="#E5E7EB"/>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
 1 | /* ListGroup */
 2 | export { default as ListGroupItem } from './ListGroup/ListGroupItem.svelte';
 3 | export { default as ListGroup } from './ListGroup/ListGroup.svelte';
 4 | /* Sidebar */
 5 | export { default as SidebarItemGroup } from './Sidebar/SidebarItemGroup.svelte';
 6 | export { default as SidebarItems } from './Sidebar/SidebarItems.svelte';
 7 | export { default as SidebarItem } from './Sidebar/SidebarItem.svelte';
 8 | export { default as SidebarLogo } from './Sidebar/SidebarLogo.svelte';
 9 | export { default as SidebarCollapse } from './Sidebar/SidebarCollapse.svelte';
10 | export { default as SidebarCTA } from './Sidebar/SidebarCTA.svelte';
11 | export { default as Sidebar } from './Sidebar/Sidebar.svelte';
12 | export { default as SidebarItemWrapper } from './Sidebar/SidebarItemWrapper.svelte';
13 | /* Dropdown */
14 | export { default as DropdownDivider } from './Dropdown/DropdownDivider.svelte';
15 | export { default as DropdownHeader } from './Dropdown/DropdownHeader.svelte';
16 | export { default as Dropdown } from './Dropdown/Dropdown.svelte';
17 | export { default as DropdownItem } from './Dropdown/DropdownItem.svelte';
18 | /* Navbar */
19 | export { default as NavbarCollapse } from './Navbar/NavbarCollapse.svelte';
20 | export { default as NavbarBrand } from './Navbar/NavbarBrand.svelte';
21 | export { default as NavbarLink } from './Navbar/NavbarLink.svelte';
22 | export { default as Navbar } from './Navbar/Navbar.svelte';
23 | export { default as NavbarToggle } from './Navbar/NavbarToggle.svelte';
24 | /* Pagination */
25 | export { default as Pagination } from './Pagination/Pagination.svelte';
26 | /* Footer */
27 | export { default as FooterCopyright } from './Footer/FooterCopyright.svelte';
28 | export { default as FooterLink } from './Footer/FooterLink.svelte';
29 | export { default as FooterIcon } from './Footer/FooterIcon.svelte';
30 | export { default as Footer } from './Footer/Footer.svelte';
31 | export { default as FooterLinkGroup } from './Footer/FooterLinkGroup.svelte';
32 | export { default as FooterBrand } from './Footer/FooterBrand.svelte';
33 | /* Form */
34 | export { default as ToggleSwitch } from './Form/ToggleSwitch.svelte';
35 | export { default as Textarea } from './Form/Textarea.svelte';
36 | export { default as FileInput } from './Form/FileInput.svelte';
37 | export { default as Select } from './Form/Select.svelte';
38 | export { default as Checkbox } from './Form/Checkbox.svelte';
39 | export { default as Label } from './Form/Label.svelte';
40 | export { default as TextInput } from './Form/TextInput.svelte';
41 | export { default as Radio } from './Form/Radio.svelte';
42 | /* Tooltip */
43 | export { default as Tooltip } from './Tooltip/Tooltip.svelte';
44 | /* Rating */
45 | export { default as Rating } from './Rating/Rating.svelte';
46 | export { default as RatingStar } from './Rating/RatingStar.svelte';
47 | export { default as RatingAdvanced } from './Rating/RatingAdvanced.svelte';
48 | /* Card */
49 | export { default as Card } from './Card/Card.svelte';
50 | /* Progress */
51 | export { default as Progress } from './Progress/Progress.svelte';
52 | /* Alert */
53 | export { default as Alert } from './Alert/Alert.svelte';
54 | /* Accordion */
55 | export { default as AccordionItem } from './Accordion/AccordionItem.svelte';
56 | export { default as Accordion } from './Accordion/Accordion.svelte';
57 | /* Toast */
58 | export { default as ToastToggle } from './Toast/ToastToggle.svelte';
59 | export { default as Toast } from './Toast/Toast.svelte';
60 | /* Spinner */
61 | export { default as Spinner } from './Spinner/Spinner.svelte';
62 | /* Button */
63 | export { default as Button } from './Button/Button.svelte';
64 | /* Table */
65 | export { default as TableHead } from './Table/TableHead.svelte';
66 | export { default as TableBody } from './Table/TableBody.svelte';
67 | export { default as TableCell } from './Table/TableCell.svelte';
68 | export { default as TableHeadCell } from './Table/TableHeadCell.svelte';
69 | export { default as TableRow } from './Table/TableRow.svelte';
70 | export { default as Table } from './Table/Table.svelte';
71 | /* Avatar */
72 | export { default as Avatar } from './Avatar/Avatar.svelte';
73 | export { default as AvatarGroup } from './Avatar/AvatarGroup.svelte';
74 | export { default as AvatarGroupCounter } from './Avatar/AvatarGroupCounter.svelte';
75 | /* Breadcrumb */
76 | export { default as BreadcrumbItem } from './Breadcrumb/BreadcrumbItem.svelte';
77 | export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.svelte';
78 | /* Modal */
79 | export { default as Modal } from './Modal/Modal.svelte';
80 | export { default as ModalFooter } from './Modal/ModalFooter.svelte';
81 | export { default as ModalBody } from './Modal/ModalBody.svelte';
82 | export { default as ModalHeader } from './Modal/ModalHeader.svelte';
83 | /* Timeline */
84 | export { default as TimelinePoint } from './Timeline/TimelinePoint.svelte';
85 | export { default as TimelineItem } from './Timeline/TimelineItem.svelte';
86 | export { default as TimelineTime } from './Timeline/TimelineTime.svelte';
87 | export { default as TimelineTitle } from './Timeline/TimelineTitle.svelte';
88 | export { default as Timeline } from './Timeline/Timeline.svelte';
89 | export { default as TimelineBody } from './Timeline/TimelineBody.svelte';
90 | export { default as TimelineContent } from './Timeline/TimelineContent.svelte';
91 | /* Badge */
92 | export { default as Badge } from './Badge/Badge.svelte';
93 | 


--------------------------------------------------------------------------------
/src/routes/rating.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { Rating, RatingAdvanced, RatingStar } from '$lib';
  3 | 
  4 |   import Card from '$lib/Card/Card.svelte';
  5 |   import { HiHomeSolid } from 'svelte-icons/hi';
  6 |   import { HighlightSvelte } from 'svelte-highlight';
  7 | </script>
  8 | 
  9 | <div class="mx-auto flex max-w-4xl flex-col gap-8 dark:text-white">
 10 |   <div class="flex flex-col gap-2">
 11 |     <span class="text-2xl font-bold">Default rating</span>
 12 |     <Card>
 13 |       <Rating>
 14 |         <RatingStar />
 15 |         <RatingStar />
 16 |         <RatingStar />
 17 |         <RatingStar />
 18 |         <RatingStar filled={false} />
 19 |       </Rating>
 20 |       <HighlightSvelte
 21 |         code={`<Rating>
 22 |   <RatingStar />
 23 |   <RatingStar />
 24 |   <RatingStar />
 25 |   <RatingStar />
 26 |   <RatingStar filled={false} />
 27 | </Rating>`}
 28 |       />
 29 |     </Card>
 30 |   </div>
 31 |   <div class="flex flex-col gap-2">
 32 |     <span class="text-2xl font-bold">Rating with text </span>
 33 |     <Card>
 34 |       <Rating>
 35 |         <RatingStar />
 36 |         <RatingStar />
 37 |         <RatingStar />
 38 |         <RatingStar />
 39 |         <RatingStar filled={false} />
 40 |         <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
 41 |       </Rating>
 42 |       <HighlightSvelte
 43 |         code={`<Rating>
 44 |   <RatingStar />
 45 |   <RatingStar />
 46 |   <RatingStar />
 47 |   <RatingStar />
 48 |   <RatingStar filled={false} />
 49 |   <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
 50 | </Rating>`}
 51 |       />
 52 |     </Card>
 53 |   </div>
 54 |   <div class="flex flex-col gap-2">
 55 |     <span class="text-2xl font-bold">Rating count </span>
 56 |     <Card>
 57 |       <Rating>
 58 |         <RatingStar />
 59 |         <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p>
 60 |         <span class="mx-1.5 h-1 w-1 rounded-full bg-gray-500 dark:bg-gray-400" />
 61 |         <a href="#" class="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white">
 62 |           73 reviews
 63 |         </a>
 64 |       </Rating>
 65 |       <HighlightSvelte
 66 |         code={`<Rating>
 67 |   <RatingStar />
 68 |   <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p>
 69 |   <span class="mx-1.5 h-1 w-1 rounded-full bg-gray-500 dark:bg-gray-400" />
 70 |   <a href="#" class="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white">
 71 |     73 reviews
 72 |   </a>
 73 | </Rating>`}
 74 |       />
 75 |     </Card>
 76 |   </div>
 77 |   <div class="flex flex-col gap-2">
 78 |     <span class="text-2xl font-bold">Star sizing </span>
 79 |     <Card>
 80 |       <Rating>
 81 |         <RatingStar />
 82 |         <RatingStar />
 83 |         <RatingStar />
 84 |         <RatingStar />
 85 |         <RatingStar filled={false} />
 86 |       </Rating>
 87 |       <Rating size="md">
 88 |         <RatingStar />
 89 |         <RatingStar />
 90 |         <RatingStar />
 91 |         <RatingStar />
 92 |         <RatingStar filled={false} />
 93 |       </Rating>
 94 |       <Rating size="lg">
 95 |         <RatingStar />
 96 |         <RatingStar />
 97 |         <RatingStar />
 98 |         <RatingStar />
 99 |         <RatingStar filled={false} />
100 |       </Rating>
101 |       <HighlightSvelte
102 |         code={`<Rating>
103 |   <RatingStar />
104 |   <RatingStar />
105 |   <RatingStar />
106 |   <RatingStar />
107 |   <RatingStar filled={false} />
108 | </Rating>
109 | <Rating size="md">
110 |   <RatingStar />
111 |   <RatingStar />
112 |   <RatingStar />
113 |   <RatingStar />
114 |   <RatingStar filled={false} />
115 | </Rating>
116 | <Rating size="lg">
117 |   <RatingStar />
118 |   <RatingStar />
119 |   <RatingStar />
120 |   <RatingStar />
121 |   <RatingStar filled={false} />
122 | </Rating>`}
123 |       />
124 |     </Card>
125 |   </div>
126 |   <div class="flex flex-col gap-2">
127 |     <span class="text-2xl font-bold">Advanced rating </span>
128 |     <Card>
129 |       <Rating>
130 |         <RatingStar />
131 |         <RatingStar />
132 |         <RatingStar />
133 |         <RatingStar />
134 |         <RatingStar filled={false} />
135 |         <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
136 |       </Rating>
137 |       <p class="text-sm font-medium text-gray-500 dark:text-gray-400">1,745 global ratings</p>
138 |       <RatingAdvanced percentFilled={70}>5 star</RatingAdvanced>
139 |       <RatingAdvanced percentFilled={17}>4 star</RatingAdvanced>
140 |       <RatingAdvanced percentFilled={8}>3 star</RatingAdvanced>
141 |       <RatingAdvanced percentFilled={4}>2 star</RatingAdvanced>
142 |       <RatingAdvanced percentFilled={1}>1 star</RatingAdvanced>
143 |       <HighlightSvelte
144 |         code={`<Rating>
145 |   <RatingStar />
146 |   <RatingStar />
147 |   <RatingStar />
148 |   <RatingStar />
149 |   <RatingStar filled={false} />
150 |   <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
151 | </Rating>
152 | <p class="text-sm font-medium text-gray-500 dark:text-gray-400">1,745 global ratings</p>
153 | <RatingAdvanced percentFilled={70}>5 star</RatingAdvanced>
154 | <RatingAdvanced percentFilled={17}>4 star</RatingAdvanced>
155 | <RatingAdvanced percentFilled={8}>3 star</RatingAdvanced>
156 | <RatingAdvanced percentFilled={4}>2 star</RatingAdvanced>
157 | <RatingAdvanced percentFilled={1}>1 star</RatingAdvanced>`}
158 |       />
159 |     </Card>
160 |   </div>
161 | </div>
162 | 


--------------------------------------------------------------------------------
/static/images/pagination-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="330" height="220" viewBox="0 0 330 220" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect x="21.5" y="15.5" width="35" height="35" rx="3.5" fill="white"/>
 3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M42.2484 27.3516C42.4734 27.5766 42.5998 27.8818 42.5998 28.2C42.5998 28.5182 42.4734 28.8233 42.2484 29.0484L38.2968 33L42.2484 36.9516C42.467 37.1779 42.588 37.481 42.5852 37.7956C42.5825 38.1103 42.4563 38.4113 42.2338 38.6337C42.0113 38.8562 41.7103 38.9824 41.3957 38.9852C41.0811 38.9879 40.7779 38.8669 40.5516 38.6484L35.7516 33.8484C35.5266 33.6233 35.4003 33.3182 35.4003 33C35.4003 32.6818 35.5266 32.3766 35.7516 32.1516L40.5516 27.3516C40.7766 27.1266 41.0818 27.0002 41.4 27.0002C41.7182 27.0002 42.0234 27.1266 42.2484 27.3516V27.3516Z" fill="#9CA3AF"/>
 4 | <rect x="21.5" y="15.5" width="35" height="35" rx="3.5" stroke="#D1D5DB"/>
 5 | <rect x="81.5" y="15.5" width="35" height="35" rx="3.5" fill="white"/>
 6 | <rect x="94" y="28" width="10" height="10" rx="4" fill="#D1D5DB"/>
 7 | <rect x="81.5" y="15.5" width="35" height="35" rx="3.5" stroke="#D1D5DB"/>
 8 | <rect x="125.5" y="15.5" width="35" height="35" rx="3.5" fill="white"/>
 9 | <rect x="138" y="28" width="10" height="10" rx="4" fill="#D1D5DB"/>
10 | <rect x="125.5" y="15.5" width="35" height="35" rx="3.5" stroke="#D1D5DB"/>
11 | <rect x="169.5" y="15.5" width="35" height="35" rx="3.5" fill="white"/>
12 | <rect x="182" y="28" width="10" height="10" rx="4" fill="#D1D5DB"/>
13 | <rect x="169.5" y="15.5" width="35" height="35" rx="3.5" stroke="#D1D5DB"/>
14 | <rect x="213.5" y="15.5" width="35" height="35" rx="3.5" fill="white"/>
15 | <rect x="226" y="28" width="10" height="10" rx="4" fill="#D1D5DB"/>
16 | <rect x="213.5" y="15.5" width="35" height="35" rx="3.5" stroke="#D1D5DB"/>
17 | <rect x="273.5" y="15.5" width="35" height="35" rx="3.5" fill="white"/>
18 | <path fill-rule="evenodd" clip-rule="evenodd" d="M287.752 38.6485C287.527 38.4235 287.4 38.1183 287.4 37.8001C287.4 37.4819 287.527 37.1767 287.752 36.9517L291.703 33.0001L287.752 29.0485C287.533 28.8222 287.412 28.519 287.415 28.2044C287.418 27.8898 287.544 27.5888 287.766 27.3663C287.989 27.1438 288.29 27.0176 288.604 27.0149C288.919 27.0121 289.222 27.1331 289.448 27.3517L294.248 32.1517C294.473 32.3767 294.6 32.6819 294.6 33.0001C294.6 33.3183 294.473 33.6234 294.248 33.8485L289.448 38.6485C289.223 38.8734 288.918 38.9998 288.6 38.9998C288.282 38.9998 287.977 38.8734 287.752 38.6485Z" fill="#9CA3AF"/>
19 | <rect x="273.5" y="15.5" width="35" height="35" rx="3.5" stroke="#D1D5DB"/>
20 | <path d="M57.5 85V84.5H57H25C22.5147 84.5 20.5 86.5147 20.5 89V117C20.5 119.485 22.5147 121.5 25 121.5H57H57.5V121V85Z" fill="white"/>
21 | <path fill-rule="evenodd" clip-rule="evenodd" d="M42.2484 97.3516C42.4734 97.5766 42.5998 97.8818 42.5998 98.2C42.5998 98.5182 42.4734 98.8233 42.2484 99.0484L38.2968 103L42.2484 106.952C42.467 107.178 42.588 107.481 42.5852 107.796C42.5825 108.11 42.4563 108.411 42.2338 108.634C42.0113 108.856 41.7103 108.982 41.3957 108.985C41.0811 108.988 40.7779 108.867 40.5516 108.648L35.7516 103.848C35.5266 103.623 35.4003 103.318 35.4003 103C35.4003 102.682 35.5266 102.377 35.7516 102.152L40.5516 97.3516C40.7766 97.1266 41.0818 97.0002 41.4 97.0002C41.7182 97.0002 42.0234 97.1266 42.2484 97.3516V97.3516Z" fill="#9CA3AF"/>
22 | <path d="M57.5 85V84.5H57H25C22.5147 84.5 20.5 86.5147 20.5 89V117C20.5 119.485 22.5147 121.5 25 121.5H57H57.5V121V85Z" stroke="#D1D5DB"/>
23 | <rect x="56.5" y="84.5" width="37" height="37" fill="white"/>
24 | <rect x="70" y="98" width="10" height="10" rx="4" fill="#D1D5DB"/>
25 | <rect x="56.5" y="84.5" width="37" height="37" stroke="#D1D5DB"/>
26 | <rect x="92.5" y="84.5" width="37" height="37" fill="white"/>
27 | <rect x="106" y="98" width="10" height="10" rx="4" fill="#D1D5DB"/>
28 | <rect x="92.5" y="84.5" width="37" height="37" stroke="#D1D5DB"/>
29 | <rect x="128.5" y="84.5" width="37" height="37" fill="white"/>
30 | <rect x="142" y="98" width="10" height="10" rx="4" fill="#D1D5DB"/>
31 | <rect x="128.5" y="84.5" width="37" height="37" stroke="#D1D5DB"/>
32 | <rect x="164.5" y="84.5" width="37" height="37" fill="white"/>
33 | <rect x="178" y="98" width="10" height="10" rx="4" fill="#D1D5DB"/>
34 | <rect x="164.5" y="84.5" width="37" height="37" stroke="#D1D5DB"/>
35 | <rect x="200.5" y="84.5" width="37" height="37" fill="white"/>
36 | <rect x="214" y="98" width="10" height="10" rx="4" fill="#D1D5DB"/>
37 | <rect x="200.5" y="84.5" width="37" height="37" stroke="#D1D5DB"/>
38 | <rect x="236.5" y="84.5" width="37" height="37" fill="white"/>
39 | <rect x="250" y="98" width="10" height="10" rx="4" fill="#D1D5DB"/>
40 | <rect x="236.5" y="84.5" width="37" height="37" stroke="#D1D5DB"/>
41 | <path d="M273 84.5H272.5V85V121V121.5H273H305C307.485 121.5 309.5 119.485 309.5 117V89C309.5 86.5147 307.485 84.5 305 84.5H273Z" fill="white"/>
42 | <path fill-rule="evenodd" clip-rule="evenodd" d="M287.752 108.648C287.527 108.423 287.4 108.118 287.4 107.8C287.4 107.482 287.527 107.177 287.752 106.952L291.703 103L287.752 99.0485C287.533 98.8222 287.412 98.519 287.415 98.2044C287.418 97.8898 287.544 97.5888 287.766 97.3663C287.989 97.1438 288.29 97.0176 288.604 97.0149C288.919 97.0121 289.222 97.1331 289.448 97.3517L294.248 102.152C294.473 102.377 294.6 102.682 294.6 103C294.6 103.318 294.473 103.623 294.248 103.848L289.448 108.648C289.223 108.873 288.918 109 288.6 109C288.282 109 287.977 108.873 287.752 108.648Z" fill="#9CA3AF"/>
43 | <path d="M273 84.5H272.5V85V121V121.5H273H305C307.485 121.5 309.5 119.485 309.5 117V89C309.5 86.5147 307.485 84.5 305 84.5H273Z" stroke="#D1D5DB"/>
44 | <rect x="122.5" y="155" width="85" height="12" rx="6" fill="#D1D5DB"/>
45 | <path d="M91 183C91 180.791 92.7909 179 95 179H165V205H95C92.7909 205 91 203.209 91 201V183Z" fill="#1A56DB"/>
46 | <rect x="115" y="188" width="26" height="8" rx="2" fill="white"/>
47 | <line x1="164.5" y1="205" x2="164.5" y2="179" stroke="#1E429F"/>
48 | <path d="M165 179H237C239.209 179 241 180.791 241 183V201C241 203.209 239.209 205 237 205H165V179Z" fill="#1A56DB"/>
49 | <rect x="189" y="188" width="28" height="8" rx="2" fill="white"/>
50 | </svg>
51 | 


--------------------------------------------------------------------------------
/static/images/pagination-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="330" height="220" viewBox="0 0 330 220" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect x="21.5" y="15.5" width="35" height="35" rx="3.5" fill="#374151"/>
 3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M42.2484 27.3516C42.4734 27.5766 42.5998 27.8818 42.5998 28.2C42.5998 28.5182 42.4734 28.8233 42.2484 29.0484L38.2968 33L42.2484 36.9516C42.467 37.1779 42.588 37.481 42.5852 37.7956C42.5825 38.1103 42.4563 38.4113 42.2338 38.6337C42.0113 38.8562 41.7103 38.9824 41.3957 38.9852C41.0811 38.9879 40.7779 38.8669 40.5516 38.6484L35.7516 33.8484C35.5266 33.6233 35.4003 33.3182 35.4003 33C35.4003 32.6818 35.5266 32.3766 35.7516 32.1516L40.5516 27.3516C40.7766 27.1266 41.0818 27.0002 41.4 27.0002C41.7182 27.0002 42.0234 27.1266 42.2484 27.3516V27.3516Z" fill="#9CA3AF"/>
 4 | <rect x="21.5" y="15.5" width="35" height="35" rx="3.5" stroke="#4B5563"/>
 5 | <rect x="81.5" y="15.5" width="35" height="35" rx="3.5" fill="#374151"/>
 6 | <rect x="94" y="28" width="10" height="10" rx="4" fill="#6B7280"/>
 7 | <rect x="81.5" y="15.5" width="35" height="35" rx="3.5" stroke="#4B5563"/>
 8 | <rect x="125.5" y="15.5" width="35" height="35" rx="3.5" fill="#374151"/>
 9 | <rect x="138" y="28" width="10" height="10" rx="4" fill="#6B7280"/>
10 | <rect x="125.5" y="15.5" width="35" height="35" rx="3.5" stroke="#4B5563"/>
11 | <rect x="169.5" y="15.5" width="35" height="35" rx="3.5" fill="#374151"/>
12 | <rect x="182" y="28" width="10" height="10" rx="4" fill="#6B7280"/>
13 | <rect x="169.5" y="15.5" width="35" height="35" rx="3.5" stroke="#4B5563"/>
14 | <rect x="213.5" y="15.5" width="35" height="35" rx="3.5" fill="#374151"/>
15 | <rect x="226" y="28" width="10" height="10" rx="4" fill="#6B7280"/>
16 | <rect x="213.5" y="15.5" width="35" height="35" rx="3.5" stroke="#4B5563"/>
17 | <rect x="273.5" y="15.5" width="35" height="35" rx="3.5" fill="#374151"/>
18 | <path fill-rule="evenodd" clip-rule="evenodd" d="M287.752 38.6485C287.527 38.4235 287.4 38.1183 287.4 37.8001C287.4 37.4819 287.527 37.1767 287.752 36.9517L291.703 33.0001L287.752 29.0485C287.533 28.8222 287.412 28.519 287.415 28.2044C287.418 27.8898 287.544 27.5888 287.766 27.3663C287.989 27.1438 288.29 27.0176 288.604 27.0149C288.919 27.0121 289.222 27.1331 289.448 27.3517L294.248 32.1517C294.473 32.3767 294.6 32.6819 294.6 33.0001C294.6 33.3183 294.473 33.6234 294.248 33.8485L289.448 38.6485C289.223 38.8734 288.918 38.9998 288.6 38.9998C288.282 38.9998 287.977 38.8734 287.752 38.6485Z" fill="#9CA3AF"/>
19 | <rect x="273.5" y="15.5" width="35" height="35" rx="3.5" stroke="#4B5563"/>
20 | <path d="M57.5 85V84.5H57H25C22.5147 84.5 20.5 86.5147 20.5 89V117C20.5 119.485 22.5147 121.5 25 121.5H57H57.5V121V85Z" fill="#374151"/>
21 | <path fill-rule="evenodd" clip-rule="evenodd" d="M42.2484 97.3516C42.4734 97.5766 42.5998 97.8818 42.5998 98.2C42.5998 98.5182 42.4734 98.8233 42.2484 99.0484L38.2968 103L42.2484 106.952C42.467 107.178 42.588 107.481 42.5852 107.796C42.5825 108.11 42.4563 108.411 42.2338 108.634C42.0113 108.856 41.7103 108.982 41.3957 108.985C41.0811 108.988 40.7779 108.867 40.5516 108.648L35.7516 103.848C35.5266 103.623 35.4003 103.318 35.4003 103C35.4003 102.682 35.5266 102.377 35.7516 102.152L40.5516 97.3516C40.7766 97.1266 41.0818 97.0002 41.4 97.0002C41.7182 97.0002 42.0234 97.1266 42.2484 97.3516V97.3516Z" fill="#9CA3AF"/>
22 | <path d="M57.5 85V84.5H57H25C22.5147 84.5 20.5 86.5147 20.5 89V117C20.5 119.485 22.5147 121.5 25 121.5H57H57.5V121V85Z" stroke="#4B5563"/>
23 | <rect x="56.5" y="84.5" width="37" height="37" fill="#374151"/>
24 | <rect x="70" y="98" width="10" height="10" rx="4" fill="#6B7280"/>
25 | <rect x="56.5" y="84.5" width="37" height="37" stroke="#4B5563"/>
26 | <rect x="92.5" y="84.5" width="37" height="37" fill="#374151"/>
27 | <rect x="106" y="98" width="10" height="10" rx="4" fill="#6B7280"/>
28 | <rect x="92.5" y="84.5" width="37" height="37" stroke="#4B5563"/>
29 | <rect x="128.5" y="84.5" width="37" height="37" fill="#374151"/>
30 | <rect x="142" y="98" width="10" height="10" rx="4" fill="#6B7280"/>
31 | <rect x="128.5" y="84.5" width="37" height="37" stroke="#4B5563"/>
32 | <rect x="164.5" y="84.5" width="37" height="37" fill="#374151"/>
33 | <rect x="178" y="98" width="10" height="10" rx="4" fill="#6B7280"/>
34 | <rect x="164.5" y="84.5" width="37" height="37" stroke="#4B5563"/>
35 | <rect x="200.5" y="84.5" width="37" height="37" fill="#374151"/>
36 | <rect x="214" y="98" width="10" height="10" rx="4" fill="#6B7280"/>
37 | <rect x="200.5" y="84.5" width="37" height="37" stroke="#4B5563"/>
38 | <rect x="236.5" y="84.5" width="37" height="37" fill="#374151"/>
39 | <rect x="250" y="98" width="10" height="10" rx="4" fill="#6B7280"/>
40 | <rect x="236.5" y="84.5" width="37" height="37" stroke="#4B5563"/>
41 | <path d="M273 84.5H272.5V85V121V121.5H273H305C307.485 121.5 309.5 119.485 309.5 117V89C309.5 86.5147 307.485 84.5 305 84.5H273Z" fill="#374151"/>
42 | <path fill-rule="evenodd" clip-rule="evenodd" d="M287.752 108.648C287.527 108.423 287.4 108.118 287.4 107.8C287.4 107.482 287.527 107.177 287.752 106.952L291.703 103L287.752 99.0485C287.533 98.8222 287.412 98.519 287.415 98.2044C287.418 97.8898 287.544 97.5888 287.766 97.3663C287.989 97.1438 288.29 97.0176 288.604 97.0149C288.919 97.0121 289.222 97.1331 289.448 97.3517L294.248 102.152C294.473 102.377 294.6 102.682 294.6 103C294.6 103.318 294.473 103.623 294.248 103.848L289.448 108.648C289.223 108.873 288.918 109 288.6 109C288.282 109 287.977 108.873 287.752 108.648Z" fill="#9CA3AF"/>
43 | <path d="M273 84.5H272.5V85V121V121.5H273H305C307.485 121.5 309.5 119.485 309.5 117V89C309.5 86.5147 307.485 84.5 305 84.5H273Z" stroke="#4B5563"/>
44 | <rect x="122.5" y="155" width="85" height="12" rx="6" fill="#9CA3AF"/>
45 | <path d="M91 183C91 180.791 92.7909 179 95 179H165V205H95C92.7909 205 91 203.209 91 201V183Z" fill="#1C64F2"/>
46 | <rect x="115" y="188" width="26" height="8" rx="2" fill="white"/>
47 | <line x1="164.5" y1="205" x2="164.5" y2="179" stroke="#1A56DB"/>
48 | <path d="M165 179H237C239.209 179 241 180.791 241 183V201C241 203.209 239.209 205 237 205H165V179Z" fill="#1C64F2"/>
49 | <rect x="189" y="188" width="28" height="8" rx="2" fill="white"/>
50 | </svg>
51 | 


--------------------------------------------------------------------------------
/src/categories.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   HiArrowCircleDownSolid,
  3 |   HiBadgeCheckSolid,
  4 |   HiBellSolid,
  5 |   HiCameraSolid,
  6 |   HiChatAlt2Solid,
  7 |   HiChatAltSolid,
  8 |   HiChevronDoubleDownOutline,
  9 |   HiChevronDoubleRightSolid,
 10 |   HiClipboardListSolid,
 11 |   HiClockSolid,
 12 |   HiCollectionSolid,
 13 |   HiCreditCardSolid,
 14 |   HiDeviceTabletOutline,
 15 |   HiDeviceTabletSolid,
 16 |   HiDotsHorizontalSolid,
 17 |   HiDuplicateSolid,
 18 |   HiHomeSolid,
 19 |   HiMenuSolid,
 20 |   HiMinusSolid,
 21 |   HiPencilAltSolid,
 22 |   HiPhotographSolid,
 23 |   HiQuestionMarkCircleSolid,
 24 |   HiStarSolid,
 25 |   HiTableSolid,
 26 |   HiUserSolid,
 27 | } from 'svelte-icons/hi';
 28 | 
 29 | import { FaSpinner } from 'svelte-icons/fa';
 30 | 
 31 | export default [
 32 |   {
 33 |     title: 'Dashboard',
 34 |     icon: HiHomeSolid,
 35 |     href: '/',
 36 |   },
 37 |   {
 38 |     title: 'Alerts',
 39 |     icon: HiBellSolid,
 40 |     href: '/alerts',
 41 |     card: {
 42 |       className: 'w-56',
 43 |       images: { light: 'alerts-light.svg', dark: 'alerts-dark.svg' },
 44 |     },
 45 |   },
 46 |   {
 47 |     title: 'Accordion',
 48 |     icon: HiCreditCardSolid,
 49 |     href: '/accordion',
 50 |     card: {
 51 |       className: 'w-56',
 52 |       images: { light: 'accordion-light.svg', dark: 'accordion-dark.svg' },
 53 |     },
 54 |   },
 55 |   {
 56 |     title: 'Avatar',
 57 |     icon: HiUserSolid,
 58 |     href: '/avatar',
 59 |     card: {
 60 |       className: 'w-40',
 61 |       images: { light: 'avatar-light.svg', dark: 'avatar-dark.svg' },
 62 |     },
 63 |   },
 64 |   {
 65 |     title: 'Badges',
 66 |     href: '/badges',
 67 |     icon: HiBadgeCheckSolid,
 68 |     card: {
 69 |       className: 'w-28',
 70 |       images: { light: 'badges-light.svg', dark: 'badges-dark.svg' },
 71 |     },
 72 |   },
 73 |   {
 74 |     title: 'Breadcrumb',
 75 |     icon: HiChevronDoubleRightSolid,
 76 |     href: '/breadcrumb',
 77 |     card: {
 78 |       className: 'w-64',
 79 |       images: { light: 'breadcrumb-light.svg', dark: 'breadcrumb-dark.svg' },
 80 |     },
 81 |   },
 82 |   {
 83 |     title: 'Buttons',
 84 |     icon: HiCollectionSolid,
 85 |     href: '/buttons',
 86 |     card: {
 87 |       className: 'w-24',
 88 |       images: { light: 'buttons.svg', dark: 'buttons.svg' },
 89 |     },
 90 |   },
 91 |   {
 92 |     title: 'Card',
 93 |     icon: HiCreditCardSolid,
 94 |     href: '/card',
 95 |     card: {
 96 |       className: 'w-36',
 97 |       images: { light: 'card-light.svg', dark: 'card-dark.svg' },
 98 |     },
 99 |   },
100 |   {
101 |     title: 'Dropdown',
102 |     icon: HiArrowCircleDownSolid,
103 |     href: '/dropdown',
104 |     card: {
105 |       className: 'w-28',
106 |       images: { light: 'dropdown-light.svg', dark: 'dropdown-dark.svg' },
107 |     },
108 |   },
109 |   {
110 |     title: 'Forms',
111 |     icon: HiPencilAltSolid,
112 |     href: '/forms',
113 |     card: {
114 |       className: 'w-40',
115 |       images: { light: 'forms-light.svg', dark: 'forms-dark.svg' },
116 |     },
117 |   },
118 |   {
119 |     title: 'Footer',
120 |     icon: HiMinusSolid,
121 |     href: '/footer',
122 |     card: {
123 |       className: 'w-40',
124 |       images: { light: 'footer-light.svg', dark: 'footer-dark.svg' },
125 |     },
126 |   },
127 |   {
128 |     title: 'List group',
129 |     icon: HiClipboardListSolid,
130 |     href: '/list-group',
131 |     card: {
132 |       className: 'w-36',
133 |       images: { light: 'list-group-light.svg', dark: 'list-group-dark.svg' },
134 |     },
135 |   },
136 |   {
137 |     title: 'Modal',
138 |     icon: HiDeviceTabletSolid,
139 |     href: '/modal',
140 |     card: {
141 |       className: 'w-36',
142 |       images: { light: 'modal-light.svg', dark: 'modal-dark.svg' },
143 |     },
144 |   },
145 |   {
146 |     title: 'Navbars',
147 |     icon: HiDotsHorizontalSolid, // FiNavigation
148 |     href: '/navbars',
149 |     card: {
150 |       className: 'w-56',
151 |       images: { light: 'navbars-light.svg', dark: 'navbars-dark.svg' },
152 |     },
153 |   },
154 |   {
155 |     title: 'Pagination',
156 |     icon: HiChevronDoubleDownOutline,
157 |     href: '/pagination',
158 |     card: {
159 |       className: 'w-36',
160 |       images: { light: 'pagination-light.svg', dark: 'pagination-dark.svg' },
161 |     },
162 |   },
163 |   {
164 |     title: 'Progress',
165 |     icon: HiMinusSolid,
166 |     href: '/progress',
167 |     card: {
168 |       className: 'w-36',
169 |       images: { light: 'progress-light.svg', dark: 'progress-dark.svg' },
170 |     },
171 |   },
172 |   {
173 |     title: 'Rating',
174 |     icon: HiStarSolid,
175 |     href: '/rating',
176 |     card: {
177 |       className: 'w-40',
178 |       images: { light: 'rating-light.svg', dark: 'rating-dark.svg' },
179 |     },
180 |   },
181 |   {
182 |     title: 'Sidebar',
183 |     icon: HiMenuSolid,
184 |     href: '/sidebar',
185 |     card: {
186 |       className: 'w-16',
187 |       images: { light: 'sidebar-light.svg', dark: 'sidebar-dark.svg' },
188 |     },
189 |   },
190 |   {
191 |     title: 'Spinners',
192 |     icon: FaSpinner,
193 |     href: '/spinners',
194 |     card: {
195 |       className: 'w-36',
196 |       images: { light: 'spinners-light.svg', dark: 'spinners-dark.svg' },
197 |     },
198 |   },
199 |   {
200 |     title: 'Tables',
201 |     icon: HiTableSolid,
202 |     href: '/tables',
203 |     card: {
204 |       className: 'w-36',
205 |       images: { light: 'tables-light.svg', dark: 'tables-dark.svg' },
206 |     },
207 |   },
208 |   {
209 |     title: 'Timeline',
210 |     icon: HiClockSolid,
211 |     href: '/timeline',
212 |     card: {
213 |       className: 'w-36',
214 |       images: { light: 'timeline-light.svg', dark: 'timeline-dark.svg' },
215 |     },
216 |   },
217 |   {
218 |     title: 'Toast',
219 |     icon: HiChatAlt2Solid,
220 |     href: '/toast',
221 |     card: {
222 |       className: 'w-36',
223 |       images: { light: 'toast-light.svg', dark: 'toast-dark.svg' },
224 |     },
225 |   },
226 |   {
227 |     title: 'Tooltips',
228 |     icon: HiChatAltSolid,
229 |     href: '/tooltips',
230 |     card: {
231 |       className: 'w-24',
232 |       images: { light: 'tooltips-light.svg', dark: 'tooltips-dark.svg' },
233 |     },
234 |   },
235 | ];
236 | 


--------------------------------------------------------------------------------