flowbite-svelte 0.27.13 → 0.27.15

package/package.json

@@ -1,259 +1,114 @@
 {
-  "name": "flowbite-svelte",
-  "version": "0.27.13",
-  "description": "Flowbite components for Svelte",
-  "main": "index.js",
-  "author": {
-    "name": "Shinichi Okada",
-    "email": "connect@codewithshin.com",
-    "url": "https://blog.codewithshin.com"
-  },
-  "bugs": "https://github.com/themesberg/flowbite-svelte/issues",
-  "homepage": "https://flowbite-svelte.com/",
-  "license": "MIT",
-  "devDependencies": {
-    "@playwright/test": "^1.25.0",
-    "@sveltejs/adapter-vercel": "1.0.0-next.78",
-    "@sveltejs/kit": "1.0.0-next.484",
-    "@sveltejs/package": "1.0.0-next.3",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
-    "autoprefixer": "^10.4.7",
-    "createprops": "^0.4.9",
-    "eslint": "^8.16.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "mdsvex": "^0.10.6",
-    "mdsvexamples": "^0.3.2",
-    "postcss": "^8.4.14",
-    "postcss-load-config": "^4.0.1",
-    "prettier": "^2.6.2",
-    "prettier-plugin-svelte": "^2.7.0",
-    "prism-themes": "^1.9.0",
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.7.1",
-    "svelte-meta-tags": "^2.6.3",
-    "svelte-preprocess": "^4.10.7",
-    "svelte2tsx": "^0.5.18",
-    "tailwindcss": "^3.1.5",
-    "tslib": "^2.3.1",
-    "typescript": "^4.7.4",
-    "vite": "^3.1.0"
-  },
-  "type": "module",
-  "keywords": [
-    "svelte",
-    "sveltekit",
-    "tailwindcss",
-    "flowbite",
-    "ui",
-    "accordion",
-    "alert",
-    "avatar",
-    "badge",
-    "breadcrumb",
-    "button-group",
-    "button",
-    "card",
-    "carousel",
-    "darkmode",
-    "dropdown",
-    "footer",
-    "forms",
-    "kbd",
-    "list group",
-    "mega menu",
-    "modal",
-    "navbar",
-    "pagination",
-    "progressbar",
-    "rating",
-    "sidebar",
-    "skeleton",
-    "spinner",
-    "table",
-    "tab",
-    "timeline",
-    "toast",
-    "tooltip",
-    "typography",
-    "video"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/themesberg/flowbite-svelte"
-  },
-  "dependencies": {
-    "@popperjs/core": "^2.11.6",
-    "classnames": "^2.3.2",
-    "flowbite": "^1.5.3"
-  },
-  "engines": {
-    "npm": ">=7.0.0",
-    "node": ">=16.0.0"
-  },
-  "contributors": [
-    "Zoltán Szőgyényi <zoltan@themesberg.com>",
-    "Robert Tanislav <robert@themesberg.com>",
-    "Victor Cordos <victor@themesberg.com>",
-    "Shinichi Okada <okada.shin@gmail.com>",
-    "Jakub Jagielka <jjagielka@gmail.com>"
-  ],
-  "exports": {
-    "./package.json": "./package.json",
-    "./.DS_Store": "./.DS_Store",
-    "./accordions/Accordion.svelte": "./accordions/Accordion.svelte",
-    "./accordions/AccordionItem.svelte": "./accordions/AccordionItem.svelte",
-    "./alerts/Alert.svelte": "./alerts/Alert.svelte",
-    "./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
-    "./avatar/Dot.svelte": "./avatar/Dot.svelte",
-    "./avatar/Placeholder.svelte": "./avatar/Placeholder.svelte",
-    "./badges/Badge.svelte": "./badges/Badge.svelte",
-    "./breadcrumbs/Breadcrumb.svelte": "./breadcrumbs/Breadcrumb.svelte",
-    "./breadcrumbs/BreadcrumbItem.svelte": "./breadcrumbs/BreadcrumbItem.svelte",
-    "./buttongroups/ButtonGroup.svelte": "./buttongroups/ButtonGroup.svelte",
-    "./buttons/Button.svelte": "./buttons/Button.svelte",
-    "./cards/Card.svelte": "./cards/Card.svelte",
-    "./carousels/Caption.svelte": "./carousels/Caption.svelte",
-    "./carousels/Carousel.svelte": "./carousels/Carousel.svelte",
-    "./carousels/CarouselTransition.svelte": "./carousels/CarouselTransition.svelte",
-    "./carousels/Indicator.svelte": "./carousels/Indicator.svelte",
-    "./carousels/Slide.svelte": "./carousels/Slide.svelte",
-    "./carousels/Thumbnail.svelte": "./carousels/Thumbnail.svelte",
-    "./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
-    "./datepicker/Calender.svelte": "./datepicker/Calender.svelte",
-    "./datepicker/Datepicker.svelte": "./datepicker/Datepicker.svelte",
-    "./drawer/Drawer.svelte": "./drawer/Drawer.svelte",
-    "./dropdowns/Dropdown.svelte": "./dropdowns/Dropdown.svelte",
-    "./dropdowns/DropdownDivider.svelte": "./dropdowns/DropdownDivider.svelte",
-    "./dropdowns/DropdownHeader.svelte": "./dropdowns/DropdownHeader.svelte",
-    "./dropdowns/DropdownItem.svelte": "./dropdowns/DropdownItem.svelte",
-    "./footer/Footer.svelte": "./footer/Footer.svelte",
-    "./footer/FooterBrand.svelte": "./footer/FooterBrand.svelte",
-    "./footer/FooterCopyright.svelte": "./footer/FooterCopyright.svelte",
-    "./footer/FooterIcon.svelte": "./footer/FooterIcon.svelte",
-    "./footer/FooterLink.svelte": "./footer/FooterLink.svelte",
-    "./footer/FooterLinkGroup.svelte": "./footer/FooterLinkGroup.svelte",
-    "./forms/Checkbox.svelte": "./forms/Checkbox.svelte",
-    "./forms/Dropzone.svelte": "./forms/Dropzone.svelte",
-    "./forms/Fileupload.svelte": "./forms/Fileupload.svelte",
-    "./forms/FloatingLabelInput.svelte": "./forms/FloatingLabelInput.svelte",
-    "./forms/Helper.svelte": "./forms/Helper.svelte",
-    "./forms/Iconinput.svelte": "./forms/Iconinput.svelte",
-    "./forms/Input.svelte": "./forms/Input.svelte",
-    "./forms/InputAddon.svelte": "./forms/InputAddon.svelte",
-    "./forms/Label.svelte": "./forms/Label.svelte",
-    "./forms/NumberInput.svelte": "./forms/NumberInput.svelte",
-    "./forms/Radio.svelte": "./forms/Radio.svelte",
-    "./forms/RadioInline.svelte": "./forms/RadioInline.svelte",
-    "./forms/Range.svelte": "./forms/Range.svelte",
-    "./forms/Search.svelte": "./forms/Search.svelte",
-    "./forms/Select.svelte": "./forms/Select.svelte",
-    "./forms/SimpleSearch.svelte": "./forms/SimpleSearch.svelte",
-    "./forms/Textarea.svelte": "./forms/Textarea.svelte",
-    "./forms/Toggle.svelte": "./forms/Toggle.svelte",
-    "./forms/VoiceSearch.svelte": "./forms/VoiceSearch.svelte",
-    ".": "./index.js",
-    "./kbd/ArrowKeyDown.svelte": "./kbd/ArrowKeyDown.svelte",
-    "./kbd/ArrowKeyLeft.svelte": "./kbd/ArrowKeyLeft.svelte",
-    "./kbd/ArrowKeyRight.svelte": "./kbd/ArrowKeyRight.svelte",
-    "./kbd/ArrowKeyUp.svelte": "./kbd/ArrowKeyUp.svelte",
-    "./kbd/Kbd.svelte": "./kbd/Kbd.svelte",
-    "./list-group/Listgroup.svelte": "./list-group/Listgroup.svelte",
-    "./list-group/ListgroupItem.svelte": "./list-group/ListgroupItem.svelte",
-    "./megamenu/MegaMenu.svelte": "./megamenu/MegaMenu.svelte",
-    "./modals/Modal.svelte": "./modals/Modal.svelte",
-    "./navbar/Menu.svelte": "./navbar/Menu.svelte",
-    "./navbar/NavBrand.svelte": "./navbar/NavBrand.svelte",
-    "./navbar/NavDropdown.svelte": "./navbar/NavDropdown.svelte",
-    "./navbar/NavHamburger.svelte": "./navbar/NavHamburger.svelte",
-    "./navbar/NavLi.svelte": "./navbar/NavLi.svelte",
-    "./navbar/NavUl.svelte": "./navbar/NavUl.svelte",
-    "./navbar/Navbar.svelte": "./navbar/Navbar.svelte",
-    "./paginations/Pagination.svelte": "./paginations/Pagination.svelte",
-    "./paginations/PaginationItem.svelte": "./paginations/PaginationItem.svelte",
-    "./popover/Popover.svelte": "./popover/Popover.svelte",
-    "./progressbars/Progressbar.svelte": "./progressbars/Progressbar.svelte",
-    "./ratings/AdvancedRating.svelte": "./ratings/AdvancedRating.svelte",
-    "./ratings/Rating.svelte": "./ratings/Rating.svelte",
-    "./ratings/RatingComment.svelte": "./ratings/RatingComment.svelte",
-    "./ratings/Review.svelte": "./ratings/Review.svelte",
-    "./ratings/ScoreRating.svelte": "./ratings/ScoreRating.svelte",
-    "./ratings/Star.svelte": "./ratings/Star.svelte",
-    "./sidebars/Sidebar.svelte": "./sidebars/Sidebar.svelte",
-    "./sidebars/SidebarBrand.svelte": "./sidebars/SidebarBrand.svelte",
-    "./sidebars/SidebarCta.svelte": "./sidebars/SidebarCta.svelte",
-    "./sidebars/SidebarDropdownItem.svelte": "./sidebars/SidebarDropdownItem.svelte",
-    "./sidebars/SidebarDropdownWrapper.svelte": "./sidebars/SidebarDropdownWrapper.svelte",
-    "./sidebars/SidebarGroup.svelte": "./sidebars/SidebarGroup.svelte",
-    "./sidebars/SidebarItem.svelte": "./sidebars/SidebarItem.svelte",
-    "./sidebars/SidebarWrapper.svelte": "./sidebars/SidebarWrapper.svelte",
-    "./skeleton/CardPlaceholder.svelte": "./skeleton/CardPlaceholder.svelte",
-    "./skeleton/ImagePlaceholder.svelte": "./skeleton/ImagePlaceholder.svelte",
-    "./skeleton/ListPlaceholder.svelte": "./skeleton/ListPlaceholder.svelte",
-    "./skeleton/Skeleton.svelte": "./skeleton/Skeleton.svelte",
-    "./skeleton/TestimonialPlaceholder.svelte": "./skeleton/TestimonialPlaceholder.svelte",
-    "./skeleton/TextPlaceholder.svelte": "./skeleton/TextPlaceholder.svelte",
-    "./skeleton/VideoPlaceholder.svelte": "./skeleton/VideoPlaceholder.svelte",
-    "./skeleton/WidgetPlaceholder.svelte": "./skeleton/WidgetPlaceholder.svelte",
-    "./spinners/Spinner.svelte": "./spinners/Spinner.svelte",
-    "./tables/Table.svelte": "./tables/Table.svelte",
-    "./tables/TableBody.svelte": "./tables/TableBody.svelte",
-    "./tables/TableBodyCell.svelte": "./tables/TableBodyCell.svelte",
-    "./tables/TableBodyRow.svelte": "./tables/TableBodyRow.svelte",
-    "./tables/TableHead.svelte": "./tables/TableHead.svelte",
-    "./tables/TableHeadCell.svelte": "./tables/TableHeadCell.svelte",
-    "./tables/TableSearch.svelte": "./tables/TableSearch.svelte",
-    "./tabs/TabHead.svelte": "./tabs/TabHead.svelte",
-    "./tabs/TabHeadItem.svelte": "./tabs/TabHeadItem.svelte",
-    "./tabs/TabItem.svelte": "./tabs/TabItem.svelte",
-    "./tabs/Tabs.svelte": "./tabs/Tabs.svelte",
-    "./timelines/Activity.svelte": "./timelines/Activity.svelte",
-    "./timelines/ActivityItem.svelte": "./timelines/ActivityItem.svelte",
-    "./timelines/Group.svelte": "./timelines/Group.svelte",
-    "./timelines/GroupItem.svelte": "./timelines/GroupItem.svelte",
-    "./timelines/Timeline.svelte": "./timelines/Timeline.svelte",
-    "./timelines/TimelineHorizontal.svelte": "./timelines/TimelineHorizontal.svelte",
-    "./timelines/TimelineItem.svelte": "./timelines/TimelineItem.svelte",
-    "./timelines/TimelineItemHorizontal.svelte": "./timelines/TimelineItemHorizontal.svelte",
-    "./timelines/TimelineItemVertical.svelte": "./timelines/TimelineItemVertical.svelte",
-    "./toasts/Toast.svelte": "./toasts/Toast.svelte",
-    "./toolbar/Toolbar.svelte": "./toolbar/Toolbar.svelte",
-    "./toolbar/ToolbarButton.svelte": "./toolbar/ToolbarButton.svelte",
-    "./toolbar/ToolbarGroup.svelte": "./toolbar/ToolbarGroup.svelte",
-    "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
-    "./types": "./types.js",
-    "./typography/A.svelte": "./typography/A.svelte",
-    "./typography/Blockquote.svelte": "./typography/Blockquote.svelte",
-    "./typography/DescriptionList.svelte": "./typography/DescriptionList.svelte",
-    "./typography/Heading.svelte": "./typography/Heading.svelte",
-    "./typography/Hr.svelte": "./typography/Hr.svelte",
-    "./typography/Img.svelte": "./typography/Img.svelte",
-    "./typography/Layout.svelte": "./typography/Layout.svelte",
-    "./typography/Li.svelte": "./typography/Li.svelte",
-    "./typography/List.svelte": "./typography/List.svelte",
-    "./typography/Mark.svelte": "./typography/Mark.svelte",
-    "./typography/P.svelte": "./typography/P.svelte",
-    "./typography/Secondary.svelte": "./typography/Secondary.svelte",
-    "./typography/Span.svelte": "./typography/Span.svelte",
-    "./typography/Ul.svelte": "./typography/Ul.svelte",
-    "./utils/Chevron.svelte": "./utils/Chevron.svelte",
-    "./utils/ChevronDown.svelte": "./utils/ChevronDown.svelte",
-    "./utils/ChevronLeft.svelte": "./utils/ChevronLeft.svelte",
-    "./utils/ChevronRight.svelte": "./utils/ChevronRight.svelte",
-    "./utils/ChevronUp.svelte": "./utils/ChevronUp.svelte",
-    "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
-    "./utils/Frame.svelte": "./utils/Frame.svelte",
-    "./utils/InformationCircle.svelte": "./utils/InformationCircle.svelte",
-    "./utils/Popper.svelte": "./utils/Popper.svelte",
-    "./utils/UserCircle.svelte": "./utils/UserCircle.svelte",
-    "./utils/Wrapper.svelte": "./utils/Wrapper.svelte",
-    "./utils/backdrop": "./utils/backdrop.js",
-    "./utils/clickOutside": "./utils/clickOutside.js",
-    "./utils/createEventDispatcher": "./utils/createEventDispatcher.js",
-    "./utils/focusTrap": "./utils/focusTrap.js",
-    "./utils/generateId": "./utils/generateId.js",
-    "./video/Video.svelte": "./video/Video.svelte"
-  },
-  "svelte": "./index.js"
-}
+	"name": "flowbite-svelte",
+	"version": "0.27.15",
+	"description": "Flowbite components for Svelte",
+	"main": "index.js",
+	"author": {
+		"name": "Shinichi Okada",
+		"email": "connect@codewithshin.com",
+		"url": "https://blog.codewithshin.com"
+	},
+	"bugs": "https://github.com/themesberg/flowbite-svelte/issues",
+	"homepage": "https://flowbite-svelte.com/",
+	"license": "MIT",
+	"scripts": {
+		"dev": "vite dev",
+		"gen:props": "node ./node_modules/createprops/createprops.js",
+		"build": "vite build",
+		"package": "svelte-package",
+		"preview": "vite preview",
+		"test": "playwright test",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.25.0",
+		"@sveltejs/adapter-vercel": "1.0.0-next.78",
+		"@sveltejs/kit": "1.0.0-next.484",
+		"@sveltejs/package": "1.0.0-next.3",
+		"@typescript-eslint/eslint-plugin": "^5.27.0",
+		"@typescript-eslint/parser": "^5.27.0",
+		"autoprefixer": "^10.4.7",
+		"createprops": "^0.4.9",
+		"eslint": "^8.16.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"mdsvex": "^0.10.6",
+		"mdsvexamples": "^0.3.2",
+		"postcss": "^8.4.14",
+		"postcss-load-config": "^4.0.1",
+		"prettier": "^2.6.2",
+		"prettier-plugin-svelte": "^2.7.0",
+		"prism-themes": "^1.9.0",
+		"svelte": "^3.44.0",
+		"svelte-check": "^2.7.1",
+		"svelte-meta-tags": "^2.6.3",
+		"svelte-preprocess": "^4.10.7",
+		"svelte2tsx": "^0.5.18",
+		"tailwindcss": "^3.1.5",
+		"tslib": "^2.3.1",
+		"typescript": "^4.7.4",
+		"vite": "^3.1.0"
+	},
+	"type": "module",
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"tailwindcss",
+		"flowbite",
+		"ui",
+		"accordion",
+		"alert",
+		"avatar",
+		"badge",
+		"breadcrumb",
+		"button-group",
+		"button",
+		"card",
+		"carousel",
+		"darkmode",
+		"dropdown",
+		"footer",
+		"forms",
+		"kbd",
+		"list group",
+		"mega menu",
+		"modal",
+		"navbar",
+		"pagination",
+		"progressbar",
+		"rating",
+		"sidebar",
+		"skeleton",
+		"spinner",
+		"table",
+		"tab",
+		"timeline",
+		"toast",
+		"tooltip",
+		"typography",
+		"video"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/themesberg/flowbite-svelte"
+	},
+	"dependencies": {
+		"@popperjs/core": "^2.11.6",
+		"classnames": "^2.3.2",
+		"flowbite": "^1.5.3"
+	},
+	"engines": {
+		"npm": ">=7.0.0",
+		"node": ">=16.0.0"
+	},
+	"contributors": [
+		"Zoltán Szőgyényi <zoltan@themesberg.com>",
+		"Robert Tanislav <robert@themesberg.com>",
+		"Victor Cordos <victor@themesberg.com>",
+		"Shinichi Okada <okada.shin@gmail.com>",
+		"Jakub Jagielka <jjagielka@gmail.com>"
+	]
+}

package/playwright.config.ts

@@ -0,0 +1,10 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	}
+};
+
+export default config;

package/postcss.config.cjs

@@ -0,0 +1,13 @@
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+const config = {
+	plugins: [
+		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+		tailwindcss(),
+		//But others, like autoprefixer, need to run after,
+		autoprefixer
+	]
+};
+
+module.exports = config;

package/src/app.css

@@ -0,0 +1,41 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+pre {
+	background-color: rgb(242, 242, 242);
+	white-space: pre-wrap;
+	width: 100%;
+}
+
+@layer base {
+	html {
+		-webkit-text-size-adjust: 100%;
+		font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+		line-height: 1.5;
+		-moz-tab-size: 4;
+		tab-size: 4;
+	}
+
+	/* Do not change these. Changing this affect components as well */
+	main p {
+		@apply text-gray-900 dark:text-white;
+	}
+  
+  .related-components,
+	.references {
+		@apply w-full flex flex-wrap;
+	}
+
+	.related-components p,
+	.references p {
+		@apply w-full md:w-1/2 lg:w-1/3;
+	}
+
+	main p>code,
+	main ul>li>code,
+	main ol>li>code {
+		@apply px-1 font-mono text-sm text-blue-600 break-all dark:text-blue-400 whitespace-nowrap;
+	}
+}

package/src/app.d.ts

@@ -0,0 +1,9 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Locals {}
+	// interface PageData {}
+	// interface Error {}
+	// interface Platform {}
+}

package/src/app.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+
+	<link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
+	<link rel="icon" type="image/png" href="/images/favicon.png">
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<!-- Google fonts -->
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
+		rel="stylesheet">
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=G-4Y9Y3WGG11"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag () { dataLayer.push(arguments); }
+		gtag('js', new Date());
+
+		gtag('config', 'G-4Y9Y3WGG11');
+	</script>
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-prefetch class="bg-white dark:bg-gray-900">
+	<div id="svelte" class="max-h-screen overflow-auto">%sveltekit.body%</div>
+</body>
+
+</html>

package/src/app.postcss

@@ -0,0 +1,4 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/hooks.server.js

@@ -0,0 +1,76 @@
+export const handle = async ({ event, resolve }) => {
+  // vite function to get all md files from components dir
+  const componentFiles = import.meta.glob('/src/routes/components/*.md')
+  const formFiles = import.meta.glob('/src/routes/forms/*.md')
+  const typographyFiles = import.meta.glob('/src/routes/typography/*.md')
+  const utilFiles = import.meta.glob('/src/routes/utilities/*.md')
+  const pageFiles = import.meta.glob('/src/routes/pages/*.md')
+  const extendFiles = import.meta.glob('/src/routes/extend/*.md')
+  // returns an array of files
+  const iterableComponentFiles = Object.entries(componentFiles)
+  const iterableFormFiles = Object.entries(formFiles)
+  const iterableTypographyFiles = Object.entries(typographyFiles)
+  const iterableUtilFiles = Object.entries(utilFiles)
+  const iterablePageFiles = Object.entries(pageFiles)
+  const iterableExtendFiles = Object.entries(extendFiles)
+  // returns an array of paths, /accordion from /src/routes/components/accordion.md
+  const allComponents = await Promise.all(
+    iterableComponentFiles.map(async ([path]) => {
+      const filePath = path.slice(22, -3)
+      return filePath
+    })
+  )
+  // returns an array of paths, /radio from /src/routes/forms/radio.md
+  const allForms = await Promise.all(
+    iterableFormFiles.map(async ([path]) => {
+      const filePath = path.slice(17, -3)
+      return filePath
+    })
+  )
+  // returns an array of paths, /hr from /src/routes/typography/hr.md
+  const allTypographys = await Promise.all(
+    iterableTypographyFiles.map(async ([path]) => {
+      const filePath = path.slice(22, -3)
+      return filePath
+    })
+  )
+  // returns an array of paths, /closebutton from /src/routes/utilities/closebutton.md
+  const allUtils = await Promise.all(
+    iterableUtilFiles.map(async ([path]) => {
+      const filePath = path.slice(21, -3)
+      return filePath
+    })
+  )
+  // returns an array of paths, /about from /src/routes/pages/about.md
+  const allPages = await Promise.all(
+    iterablePageFiles.map(async ([path]) => {
+      const filePath = path.slice(17, -3)
+      return filePath
+    })
+  )
+  // returns an array of paths, /icons from /src/routes/extend/icons.md
+  const allExtends = await Promise.all(
+    iterableExtendFiles.map(async ([path]) => {
+      const filePath = path.slice(18, -3)
+      return filePath
+    })
+  )
+
+  // check if pathname is included itn allComponents
+  if (allComponents.includes(event.url.pathname)) {
+    // redirect
+    return Response.redirect(`${event.url.origin}/components${event.url.pathname}`, 301)
+  } else if (allForms.includes(event.url.pathname)) {
+    return Response.redirect(`${event.url.origin}/forms${event.url.pathname}`, 301)
+  } else if (allTypographys.includes(event.url.pathname)) {
+    return Response.redirect(`${event.url.origin}/typography${event.url.pathname}`, 301)
+  } else if (allPages.includes(event.url.pathname)) {
+    return Response.redirect(`${event.url.origin}/pages${event.url.pathname}`, 301)
+  } else if (allExtends.includes(event.url.pathname)) {
+    return Response.redirect(`${event.url.origin}/extend${event.url.pathname}`, 301)
+  } else if (allUtils.includes(event.url.pathname)) {
+    return Response.redirect(`${event.url.origin}/utilities${event.url.pathname}`, 301)
+  }
+
+  return await resolve(event);
+}

package/src/lib/accordions/Accordion.svelte

@@ -0,0 +1,45 @@
+<script context="module" lang="ts">
+  import { writable, type Writable } from 'svelte/store';
+
+  export interface AccordionCtxType {
+    flush: boolean;
+    activeClasses: string;
+    inactiveClasses: string;
+    selected?: Writable<object>;
+  }
+</script>
+
+<script lang="ts">
+  import Frame from '$lib/utils/Frame.svelte';
+  import classNames from 'classnames';
+  import { setContext } from 'svelte';
+
+  export let multiple: boolean = false;
+  export let flush: boolean = false;
+  export let activeClasses: string =
+    'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
+  export let inactiveClasses: string =
+    'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
+  export let defaultClass: string = 'text-gray-500 dark:text-gray-400';
+
+  const ctx: AccordionCtxType = {
+    flush,
+    activeClasses,
+    inactiveClasses,
+    selected: multiple ? undefined : writable()
+  };
+
+  setContext<AccordionCtxType>('ctx', ctx);
+
+  let frameClass = classNames(
+    defaultClass,
+    'divide-y divide-gray-200 dark:divide-gray-700',
+    'border-gray-200 dark:border-gray-700',
+    'rounded-t-xl',
+    $$props.class
+  );
+</script>
+
+<Frame class={frameClass} color="none" border={!flush}>
+  <slot />
+</Frame>