├── .env.example
├── .eslintignore
├── .eslintrc.cjs
├── .github
    └── workflows
    │   └── deploy-vercel.yml
├── .gitignore
├── .prettierignore
├── LICENSE.md
├── README.md
├── bun.lockb
├── components.json
├── drizzle.config.ts
├── mdsvex.config.mjs
├── package.json
├── postcss.config.cjs
├── prettier.config.mjs
├── src
    ├── app.d.ts
    ├── app.html
    ├── app.postcss
    ├── content
    │   └── pages
    │   │   ├── about.svelte.md
    │   │   ├── privacy.svelte.md
    │   │   └── terms.svelte.md
    ├── emails
    │   └── magic-link-email.svelte
    ├── hooks.server.ts
    ├── lib
    │   ├── actions
    │   │   └── autosize-action.ts
    │   ├── auth.ts
    │   ├── components
    │   │   ├── back-button.svelte
    │   │   ├── chat
    │   │   │   ├── button-scroll-to-bottom.svelte
    │   │   │   ├── chat-list.svelte
    │   │   │   ├── chat-message-actions.svelte
    │   │   │   ├── chat-message.svelte
    │   │   │   ├── chat-panel.svelte
    │   │   │   ├── chat-sidebar-actions.svelte
    │   │   │   ├── chat-sidebar-footer.svelte
    │   │   │   ├── chat-sidebar-item.svelte
    │   │   │   ├── chat-sidebar-list.svelte
    │   │   │   ├── chat-sidebar.svelte
    │   │   │   ├── chat.svelte
    │   │   │   ├── clear-history.svelte
    │   │   │   ├── empty-screen.svelte
    │   │   │   ├── footer-text.svelte
    │   │   │   └── prompt-form.svelte
    │   │   ├── cookies.svelte
    │   │   ├── copy-button.svelte
    │   │   ├── error-card.svelte
    │   │   ├── external-link.svelte
    │   │   ├── icons
    │   │   │   ├── apple.svelte
    │   │   │   ├── aria.svelte
    │   │   │   ├── discord.svelte
    │   │   │   ├── github.svelte
    │   │   │   ├── google.svelte
    │   │   │   ├── index.ts
    │   │   │   ├── logo.svelte
    │   │   │   ├── npm.svelte
    │   │   │   ├── paypal.svelte
    │   │   │   ├── pnpm.svelte
    │   │   │   ├── radix-svelte.svelte
    │   │   │   ├── radix.svelte
    │   │   │   ├── tailwind.svelte
    │   │   │   └── yarn.svelte
    │   │   ├── layout
    │   │   │   ├── container.svelte
    │   │   │   ├── container.ts
    │   │   │   ├── heading.svelte
    │   │   │   ├── heading.ts
    │   │   │   ├── index.ts
    │   │   │   ├── main-nav.svelte
    │   │   │   ├── mobile-link.svelte
    │   │   │   ├── mobile-nav.svelte
    │   │   │   ├── page-layout-md.svelte
    │   │   │   ├── shell.svelte
    │   │   │   ├── shell.ts
    │   │   │   ├── sidebar-nav-items.svelte
    │   │   │   ├── sidebar-nav.svelte
    │   │   │   ├── site-footer.svelte
    │   │   │   └── site-header.svelte
    │   │   ├── mdsvex
    │   │   │   ├── a.svelte
    │   │   │   ├── blockquote.svelte
    │   │   │   ├── h1.svelte
    │   │   │   ├── h2.svelte
    │   │   │   ├── h3.svelte
    │   │   │   ├── h4.svelte
    │   │   │   ├── h5.svelte
    │   │   │   ├── h6.svelte
    │   │   │   ├── hr.svelte
    │   │   │   ├── img.svelte
    │   │   │   ├── index.ts
    │   │   │   ├── li.svelte
    │   │   │   ├── mdsvex.svelte
    │   │   │   ├── ol.svelte
    │   │   │   ├── p.svelte
    │   │   │   ├── pre.svelte
    │   │   │   ├── table.svelte
    │   │   │   ├── td.svelte
    │   │   │   ├── th.svelte
    │   │   │   ├── tr.svelte
    │   │   │   └── ul.svelte
    │   │   ├── svelte-themes
    │   │   │   ├── SvelteTheme.svelte
    │   │   │   ├── ThemeScript.svelte
    │   │   │   ├── constants.ts
    │   │   │   ├── helpers.ts
    │   │   │   └── index.ts
    │   │   ├── theme-toggle.svelte
    │   │   ├── toaster.svelte
    │   │   ├── ui
    │   │   │   ├── accordion
    │   │   │   │   ├── accordion-content.svelte
    │   │   │   │   ├── accordion-item.svelte
    │   │   │   │   ├── accordion-trigger.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── alert-dialog
    │   │   │   │   ├── alert-dialog-action.svelte
    │   │   │   │   ├── alert-dialog-cancel.svelte
    │   │   │   │   ├── alert-dialog-content.svelte
    │   │   │   │   ├── alert-dialog-description.svelte
    │   │   │   │   ├── alert-dialog-footer.svelte
    │   │   │   │   ├── alert-dialog-header.svelte
    │   │   │   │   ├── alert-dialog-overlay.svelte
    │   │   │   │   ├── alert-dialog-portal.svelte
    │   │   │   │   ├── alert-dialog-title.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── alert
    │   │   │   │   ├── alert-description.svelte
    │   │   │   │   ├── alert-title.svelte
    │   │   │   │   ├── alert.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── aspect-ratio
    │   │   │   │   ├── aspect-ratio.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── avatar
    │   │   │   │   ├── avatar-fallback.svelte
    │   │   │   │   ├── avatar-image.svelte
    │   │   │   │   ├── avatar.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── badge
    │   │   │   │   ├── badge.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── button
    │   │   │   │   ├── button.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── card
    │   │   │   │   ├── card-content.svelte
    │   │   │   │   ├── card-description.svelte
    │   │   │   │   ├── card-footer.svelte
    │   │   │   │   ├── card-header.svelte
    │   │   │   │   ├── card-title.svelte
    │   │   │   │   ├── card.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── checkbox
    │   │   │   │   ├── checkbox.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── collapsible
    │   │   │   │   ├── collapsible-content.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── context-menu
    │   │   │   │   ├── context-menu-checkbox-item.svelte
    │   │   │   │   ├── context-menu-content.svelte
    │   │   │   │   ├── context-menu-item.svelte
    │   │   │   │   ├── context-menu-label.svelte
    │   │   │   │   ├── context-menu-radio-group.svelte
    │   │   │   │   ├── context-menu-radio-item.svelte
    │   │   │   │   ├── context-menu-separator.svelte
    │   │   │   │   ├── context-menu-shortcut.svelte
    │   │   │   │   ├── context-menu-sub-content.svelte
    │   │   │   │   ├── context-menu-sub-trigger.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── dialog
    │   │   │   │   ├── dialog-content.svelte
    │   │   │   │   ├── dialog-description.svelte
    │   │   │   │   ├── dialog-footer.svelte
    │   │   │   │   ├── dialog-header.svelte
    │   │   │   │   ├── dialog-overlay.svelte
    │   │   │   │   ├── dialog-portal.svelte
    │   │   │   │   ├── dialog-title.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── dropdown-menu
    │   │   │   │   ├── dropdown-menu-checkbox-item.svelte
    │   │   │   │   ├── dropdown-menu-content.svelte
    │   │   │   │   ├── dropdown-menu-item.svelte
    │   │   │   │   ├── dropdown-menu-label.svelte
    │   │   │   │   ├── dropdown-menu-radio-group.svelte
    │   │   │   │   ├── dropdown-menu-radio-item.svelte
    │   │   │   │   ├── dropdown-menu-separator.svelte
    │   │   │   │   ├── dropdown-menu-shortcut.svelte
    │   │   │   │   ├── dropdown-menu-sub-content.svelte
    │   │   │   │   ├── dropdown-menu-sub-trigger.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── form
    │   │   │   │   ├── form-button.svelte
    │   │   │   │   ├── form-checkbox.svelte
    │   │   │   │   ├── form-description.svelte
    │   │   │   │   ├── form-input.svelte
    │   │   │   │   ├── form-item.svelte
    │   │   │   │   ├── form-label.svelte
    │   │   │   │   ├── form-native-select.svelte
    │   │   │   │   ├── form-radio-group.svelte
    │   │   │   │   ├── form-select-trigger.svelte
    │   │   │   │   ├── form-select.svelte
    │   │   │   │   ├── form-switch.svelte
    │   │   │   │   ├── form-textarea.svelte
    │   │   │   │   ├── form-validation.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── hover-card
    │   │   │   │   ├── hover-card-content.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── input
    │   │   │   │   ├── index.ts
    │   │   │   │   └── input.svelte
    │   │   │   ├── label
    │   │   │   │   ├── index.ts
    │   │   │   │   └── label.svelte
    │   │   │   ├── menubar
    │   │   │   │   ├── index.ts
    │   │   │   │   ├── menubar-checkbox-item.svelte
    │   │   │   │   ├── menubar-content.svelte
    │   │   │   │   ├── menubar-item.svelte
    │   │   │   │   ├── menubar-label.svelte
    │   │   │   │   ├── menubar-radio-item.svelte
    │   │   │   │   ├── menubar-separator.svelte
    │   │   │   │   ├── menubar-shortcut.svelte
    │   │   │   │   ├── menubar-sub-content.svelte
    │   │   │   │   ├── menubar-sub-trigger.svelte
    │   │   │   │   ├── menubar-trigger.svelte
    │   │   │   │   └── menubar.svelte
    │   │   │   ├── popover
    │   │   │   │   ├── index.ts
    │   │   │   │   └── popover-content.svelte
    │   │   │   ├── progress
    │   │   │   │   ├── index.ts
    │   │   │   │   └── progress.svelte
    │   │   │   ├── radio-group
    │   │   │   │   ├── index.ts
    │   │   │   │   ├── radio-group-item.svelte
    │   │   │   │   └── radio-group.svelte
    │   │   │   ├── select
    │   │   │   │   ├── index.ts
    │   │   │   │   ├── select-content.svelte
    │   │   │   │   ├── select-item.svelte
    │   │   │   │   ├── select-label.svelte
    │   │   │   │   ├── select-separator.svelte
    │   │   │   │   ├── select-trigger.svelte
    │   │   │   │   └── select.svelte
    │   │   │   ├── separator
    │   │   │   │   ├── index.ts
    │   │   │   │   └── separator.svelte
    │   │   │   ├── sheet
    │   │   │   │   ├── index.ts
    │   │   │   │   ├── sheet-content.svelte
    │   │   │   │   ├── sheet-description.svelte
    │   │   │   │   ├── sheet-footer.svelte
    │   │   │   │   ├── sheet-header.svelte
    │   │   │   │   ├── sheet-overlay.svelte
    │   │   │   │   ├── sheet-portal.svelte
    │   │   │   │   └── sheet-title.svelte
    │   │   │   ├── skeleton
    │   │   │   │   ├── index.ts
    │   │   │   │   └── skeleton.svelte
    │   │   │   ├── slider
    │   │   │   │   ├── index.ts
    │   │   │   │   └── slider.svelte
    │   │   │   ├── switch
    │   │   │   │   ├── index.ts
    │   │   │   │   └── switch.svelte
    │   │   │   ├── table
    │   │   │   │   ├── index.ts
    │   │   │   │   ├── table-body.svelte
    │   │   │   │   ├── table-caption.svelte
    │   │   │   │   ├── table-cell.svelte
    │   │   │   │   ├── table-footer.svelte
    │   │   │   │   ├── table-head.svelte
    │   │   │   │   ├── table-header.svelte
    │   │   │   │   ├── table-row.svelte
    │   │   │   │   └── table.svelte
    │   │   │   ├── tabs
    │   │   │   │   ├── index.ts
    │   │   │   │   ├── tabs-content.svelte
    │   │   │   │   ├── tabs-list.svelte
    │   │   │   │   └── tabs-trigger.svelte
    │   │   │   ├── textarea
    │   │   │   │   ├── index.ts
    │   │   │   │   └── textarea.svelte
    │   │   │   ├── toggle
    │   │   │   │   ├── index.ts
    │   │   │   │   └── toggle.svelte
    │   │   │   └── tooltip
    │   │   │   │   ├── index.ts
    │   │   │   │   └── tooltip-content.svelte
    │   │   ├── user-avatar.svelte
    │   │   └── user-menu.svelte
    │   ├── config
    │   │   ├── dashboard.ts
    │   │   ├── nav.ts
    │   │   └── site.ts
    │   ├── constants.ts
    │   ├── images
    │   │   ├── github.svg
    │   │   ├── svelte-logo.svg
    │   │   ├── svelte-welcome.png
    │   │   └── svelte-welcome.webp
    │   ├── schemas
    │   │   ├── account-schema.ts
    │   │   └── contact-schema.ts
    │   ├── stores
    │   │   ├── breakpoint-store.ts
    │   │   ├── cookies-store.ts
    │   │   └── scroll-utils-store.ts
    │   ├── types
    │   │   ├── auth-js.d.ts
    │   │   ├── db.ts
    │   │   ├── nav.ts
    │   │   └── types.d.ts
    │   ├── utils.ts
    │   └── vitals.ts
    ├── routes
    │   ├── (app)
    │   │   ├── (marketing)
    │   │   │   ├── +error.svelte
    │   │   │   ├── +layout.svelte
    │   │   │   ├── +page.server.ts
    │   │   │   ├── +page.svelte
    │   │   │   ├── [slug]
    │   │   │   │   ├── +page.svelte
    │   │   │   │   └── +page.ts
    │   │   │   ├── blog
    │   │   │   │   ├── +page.server.ts
    │   │   │   │   └── +page.svelte
    │   │   │   └── contact
    │   │   │   │   ├── +page.server.ts
    │   │   │   │   └── +page.svelte
    │   │   ├── +layout.server.ts
    │   │   ├── +layout.svelte
    │   │   ├── auth
    │   │   │   ├── (not-authed)
    │   │   │   │   ├── +layout.server.ts
    │   │   │   │   ├── sign-in
    │   │   │   │   │   └── +page.svelte
    │   │   │   │   ├── sign-up
    │   │   │   │   │   └── +page.svelte
    │   │   │   │   └── verify-req
    │   │   │   │   │   ├── +page.svelte
    │   │   │   │   │   └── +page.ts
    │   │   │   ├── +layout.svelte
    │   │   │   ├── auth-error
    │   │   │   │   └── +page.svelte
    │   │   │   └── sign-out
    │   │   │   │   ├── +page.server.ts
    │   │   │   │   └── +page.svelte
    │   │   ├── chat
    │   │   │   ├── +layout.server.ts
    │   │   │   ├── +layout.svelte
    │   │   │   ├── +page.svelte
    │   │   │   ├── button-scroll-to-bottom.svelte
    │   │   │   ├── chat-list.svelte
    │   │   │   ├── chat-message-actions.svelte
    │   │   │   ├── chat-message.svelte
    │   │   │   ├── chat-panel.svelte
    │   │   │   ├── chat-sidebar-actions.svelte
    │   │   │   ├── chat-sidebar-footer.svelte
    │   │   │   ├── chat-sidebar-item.svelte
    │   │   │   ├── chat-sidebar-list.svelte
    │   │   │   ├── chat-sidebar.svelte
    │   │   │   ├── chat.svelte
    │   │   │   ├── clear-history.svelte
    │   │   │   ├── empty-screen.svelte
    │   │   │   ├── footer-text.svelte
    │   │   │   └── prompt-form.svelte
    │   │   └── dashboard
    │   │   │   ├── +layout.server.ts
    │   │   │   ├── +layout.svelte
    │   │   │   ├── +page.ts
    │   │   │   └── account
    │   │   │       ├── +page.server.ts
    │   │   │       └── +page.svelte
    │   ├── +layout.server.ts
    │   ├── +layout.svelte
    │   └── api
    │   │   ├── auth
    │   │       └── session
    │   │       │   └── +server.ts
    │   │   └── chat
    │   │       └── +server.ts
    ├── server
    │   ├── db
    │   │   ├── chat-db.ts
    │   │   ├── index.ts
    │   │   ├── schema.ts
    │   │   └── user-db.ts
    │   └── email.ts
    └── styles
    │   └── mdsvex.css
├── static
    ├── favicon.png
    └── robots.txt
├── svelte.config.js
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts


/.env.example:
--------------------------------------------------------------------------------
 1 | # -----------------------------------------------------------------------------
 2 | # App
 3 | # -----------------------------------------------------------------------------
 4 | NEXT_PUBLIC_APP_URL=http://localhost:3000
 5 | 
 6 | # -----------------------------------------------------------------------------
 7 | # Database
 8 | # -----------------------------------------------------------------------------
 9 | DATABASE_URL='file:./db.sqlite'
10 | DATABASE_AUTH_TOKEN=
11 | 
12 | # -----------------------------------------------------------------------------
13 | # Authentication (NextAuth.js)
14 | # -----------------------------------------------------------------------------
15 | AUTH_URL=http://localhost:3000
16 | AUTH_SECRET=2gxHTLx+ZyCCCbb808/IK0kKErvYwLcbRIb7jJVCJ3E=
17 | 
18 | GOOGLE_CLIENT_ID=
19 | GOOGLE_CLIENT_SECRET=
20 | 
21 | # -----------------------------------------------------------------------------
22 | # Email
23 | # -----------------------------------------------------------------------------
24 | RESEND_API_KEY=
25 | EMAIL_SERVER_FROM=
26 | 
27 | # -----------------------------------------------------------------------------
28 | # Various
29 | # -----------------------------------------------------------------------------
30 | OPENAI_API_KEY=


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 
15 | src/lib/components/ui/**/*


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	extends: [
 4 | 		'eslint:recommended',
 5 | 		'plugin:@typescript-eslint/recommended',
 6 | 		'plugin:svelte/recommended',
 7 | 		"plugin:prettier/recommended"
 8 | 	],
 9 | 	parser: '@typescript-eslint/parser',
10 | 	plugins: ['@typescript-eslint'],
11 | 	parserOptions: {
12 | 		sourceType: 'module',
13 | 		ecmaVersion: 2020,
14 | 		extraFileExtensions: ['.svelte']
15 | 	},
16 | 	env: {
17 | 		browser: true,
18 | 		es2017: true,
19 | 		node: true
20 | 	},
21 | 	overrides: [
22 | 		{
23 | 			files: ['*.svelte'],
24 | 			parser: 'svelte-eslint-parser',
25 | 			parserOptions: {
26 | 				parser: '@typescript-eslint/parser'
27 | 			}
28 | 		}
29 | 	]
30 | };
31 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | .vercel
10 | .output
11 | vite.config.js.timestamp-*
12 | vite.config.ts.timestamp-*
13 | db.sqlite
14 | .idea


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Julius Lipp 
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/juliuslipp/sveltekit-shadcn-ai/07d1ff53476e335cf06e66892fc6d4d41f4b230e/bun.lockb


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://shadcn-svelte.com/schema.json",
 3 |   "style": "new-york",
 4 |   "tailwind": {
 5 |     "config": "tailwind.config.js",
 6 |     "css": "src/app.postcss",
 7 |     "baseColor": "slate"
 8 |   },
 9 |   "aliases": {
10 |     "components": "$lib/components",
11 |     "utils": "$lib/utils"
12 |   }
13 | }


--------------------------------------------------------------------------------
/drizzle.config.ts:
--------------------------------------------------------------------------------
 1 | import * as dotenv from "dotenv";
 2 | import type { Config } from "drizzle-kit";
 3 | 
 4 | dotenv.config();
 5 | 
 6 | const config = {
 7 |   schema: "src/server/db/schema.ts",
 8 |   out: "drizzle",
 9 |   driver: "turso",
10 |   tablesFilter: ["svelte-app-starter_*"],
11 |   dbCredentials: {
12 |     url: process.env.DATABASE_URL!,
13 |     authToken: process.env.DATABASE_AUTH_TOKEN,
14 |   },
15 | } satisfies Config;
16 | 
17 | export default config;
18 | 


--------------------------------------------------------------------------------
/mdsvex.config.mjs:
--------------------------------------------------------------------------------
 1 | import path from "path";
 2 | import { defineMDSveXConfig as defineConfig } from "mdsvex";
 3 | 
 4 | const config = defineConfig({
 5 |   extensions: [".svelte.md", ".md", ".svx"],
 6 |   layout: path.resolve("./src/lib/components/mdsvex/mdsvex.svelte"),
 7 |   smartypants: {
 8 |     dashes: "oldschool",
 9 |   },
10 |   remarkPlugins: [],
11 |   rehypePlugins: [],
12 | });
13 | 
14 | export default config;
15 | 


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
 1 | const tailwindcss = require("tailwindcss");
 2 | const autoprefixer = require("autoprefixer");
 3 | const cssnano = require("cssnano");
 4 | const config = {
 5 |   plugins: [
 6 |     //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
 7 |     tailwindcss(),
 8 |     //But others, like autoprefixer, need to run after,
 9 |     autoprefixer,
10 |     cssnano({preset: "default"})
11 |   ]
12 | };
13 | 
14 | module.exports = config;


--------------------------------------------------------------------------------
/prettier.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('prettier').Config} */
 2 | export default {
 3 |     endOfLine: "lf",
 4 |     semi: true,
 5 |     singleQuote: false,
 6 |     tabWidth: 2,
 7 |     trailingComma: "es5",
 8 | // @ts-ignore
 9 |     importOrder: [
10 |         "^(react/(.*)$)|^(react$)",
11 |         "^(next/(.*)$)|^(next$)",
12 |         "<THIRD_PARTY_MODULES>",
13 |         "",
14 |         "^types$",
15 |         "^@/env(.*)$",
16 |         "^@/types/(.*)$",
17 |         "^@/config/(.*)$",
18 |         "^@/lib/(.*)$",
19 |         "^@/hooks/(.*)$",
20 |         "^@/components/ui/(.*)$",
21 |         "^@/components/(.*)$",
22 |         "^@/styles/(.*)$",
23 |         "^@/app/(.*)$",
24 |         "",
25 |         "^[./]",
26 |     ],
27 |     importOrderSeparation: false,
28 |     importOrderSortSpecifiers: true,
29 |     importOrderBuiltinModulesToTop: true,
30 |     importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
31 |     importOrderMergeDuplicateImports: true,
32 |     importOrderCombineTypeAndValueImports: true,
33 |     pluginSearchDirs: ["."],
34 |     overrides: [{"files": "*.svelte", "options": {"parser": "svelte"}}],
35 |     plugins: ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss", "prettier-plugin-svelte"],
36 | }
37 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://kit.svelte.dev/docs/types#app
 2 | // for information about these interfaces
 3 | declare global {
 4 |   namespace App {
 5 |     // interface Error {}
 6 |     // interface Locals {}
 7 |     // interface PageData {}
 8 |     // interface Platform {}
 9 |   }
10 | }
11 | 
12 | export {};
13 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width" />
 7 | 		%sveltekit.head%
 8 | 
 9 | 		<style>
10 | 			body {
11 | 				top: 0!important;
12 | 				left: 0!important;
13 | 				right: 0!important;
14 | 				bottom: 0!important;
15 | 				position: unset !important;
16 | 			}
17 | 		</style>
18 | 	</head>
19 | 	<body class="min-h-screen h-content" data-sveltekit-preload-data="hover">
20 | 		<div style="display: contents">%sveltekit.body%</div>
21 | 	</body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/src/content/pages/about.svelte.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: About Us
 3 | description: "Us!"
 4 | ---
 5 | 
 6 | ...
 7 | 
 8 | ## Our Mission
 9 | 
10 | ...
11 | 
12 | ## Our Journey
13 | 
14 | ...
15 | ## Meet the Team
16 | 
17 | ...
18 | 
19 | - [Julius Lipp](https://www.linkedin.com/in/julius-lipp/): What up.
20 | 
21 | ## Contact Us
22 | 
23 | 
24 | <div class="mt-8 text-center">
25 |   Crafted with dedication and ❤️
26 | </div>
27 | 


--------------------------------------------------------------------------------
/src/content/pages/privacy.svelte.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Privacy Policy
3 | description: last updated June 22, 2023
4 | ---
5 | 
6 |  is committed to protecting your privacy and ensuring that your personal information is handled in a safe and responsible manner. This Privacy Policy outlines how we collect, use, and protect your information when you access and use our Embeddings as a Service API. By using our service, you consent to the collection, use, and disclosure of your information as described in this Privacy Policy.
7 | 
8 | ## Consent
9 | 


--------------------------------------------------------------------------------
/src/content/pages/terms.svelte.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Terms & Conditions
3 | description: last updated June 22, 2023
4 | ---
5 | Please read these Terms and Conditions ("Terms", "Terms and Conditions") carefully.
6 | 


--------------------------------------------------------------------------------
/src/lib/actions/autosize-action.ts:
--------------------------------------------------------------------------------
 1 | import autosize from "autosize";
 2 | 
 3 | const autosizeAction = (node: HTMLElement) => {
 4 |   autosize(node);
 5 | 
 6 |   return {
 7 |     destroy() {
 8 |       autosize.destroy(node);
 9 |     },
10 |   };
11 | };
12 | 
13 | autosizeAction.update = autosize.update;
14 | autosizeAction.destroy = autosize.destroy;
15 | 
16 | export { autosizeAction };
17 | 


--------------------------------------------------------------------------------
/src/lib/auth.ts:
--------------------------------------------------------------------------------
 1 | import type { DefaultSession, Session } from "@auth/core/types";
 2 | import { redirect } from "@sveltejs/kit";
 3 | 
 4 | interface ObjectWithSession {
 5 |   data: {
 6 |     session?: Session;
 7 |   };
 8 | }
 9 | 
10 | export const getOrRedirect = (session: Session | undefined) => {
11 |   if (!session?.user) {
12 |     throw redirect(303, "/auth/sign-in");
13 |   }
14 | 
15 |   return session;
16 | };
17 | 
18 | export const getUser = (
19 |   { data: { session } }: ObjectWithSession = { data: {} }
20 | ): DefaultSession["user"] | undefined => session?.user;
21 | 


--------------------------------------------------------------------------------
/src/lib/components/back-button.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { Button } from "$lib/components/ui/button";
 3 | 
 4 |   const conditionallyNavigateBack = () => {
 5 |     const referrer = document?.referrer;
 6 |     const siteURL = window?.location?.origin;
 7 | 
 8 |     if (referrer && referrer.indexOf(siteURL) === 0) {
 9 |       window.history.back();
10 |     } else {
11 |       window.location.href = "/";
12 |     }
13 |   };
14 | </script>
15 | 
16 | <Button on:click={conditionallyNavigateBack} {...$$restProps}>
17 |   <slot />
18 | </Button>
19 | 


--------------------------------------------------------------------------------
/src/lib/components/chat/button-scroll-to-bottom.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { Icons } from "$lib/components/icons";
 3 |   import { Button } from "$lib/components/ui/button";
 4 |   import { cn } from "$lib/utils";
 5 | 
 6 |   let className: string | undefined | null = undefined;
 7 |   export { className as class };
 8 | 
 9 |   let isAtBottom = false;
10 |   function handleScroll() {
11 |     isAtBottom =
12 |       window.innerHeight + window.scrollY >= document.body.offsetHeight;
13 |   }
14 | </script>
15 | 
16 | <svelte:window on:scroll={handleScroll} />
17 | 
18 | <Button
19 |   variant="outline"
20 |   size="icon"
21 |   class={cn(
22 |     "transition-opacity",
23 |     isAtBottom ? "opacity-0" : "opacity-100",
24 |     className
25 |   )}
26 |   on:click={() =>
27 |     window.scrollTo({
28 |       top: document.body.offsetHeight,
29 |       behavior: "smooth",
30 |     })}
31 |   {...$$restProps}
32 | >
33 |   <Icons.arrowDown class="w-5 h-5" />
34 |   <span class="sr-only">Scroll to bottom</span>
35 | </Button>
36 | 


--------------------------------------------------------------------------------
/src/lib/components/chat/chat-list.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { Separator } from "$lib/components/ui/separator";
 3 |   import type { UseChatHelpers } from "ai/svelte";
 4 | 
 5 |   import ChatMessage from "./chat-message.svelte";
 6 | 
 7 |   export let messages: UseChatHelpers["messages"];
 8 | </script>
 9 | 
10 | {#if $messages?.length}
11 |   <div class="relative mx-auto max-w-2xl px-4">
12 |     {#each $messages as message, index}
13 |       <div>
14 |         <ChatMessage {message} />
15 |         {#if index < $messages.length - 1}
16 |           <Separator class="my-4 md:my-8" />
17 |         {/if}
18 |       </div>
19 |     {/each}
20 |   </div>
21 | {/if}
22 | 


--------------------------------------------------------------------------------
/src/lib/components/chat/chat-message-actions.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import CopyButton from "$components/copy-button.svelte";
 3 |   import { cn } from "$lib/utils";
 4 |   import type { Message } from "ai";
 5 | 
 6 |   export let message: Message;
 7 | 
 8 |   let className: string | undefined | null = undefined;
 9 |   export { className as class };
10 | </script>
11 | 
12 | <div
13 |   class={cn(
14 |     "flex items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0",
15 |     className
16 |   )}
17 |   {...$$restProps}
18 | >
19 |   <CopyButton class="absolute" value={message.content}></CopyButton>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/src/lib/components/chat/chat-message.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { page } from "$app/stores";
 3 |   import { Icons } from "$lib/components/icons";
 4 |   import UserAvatar from "$lib/components/user-avatar.svelte";
 5 |   import { cn } from "$lib/utils";
 6 |   import type { Message } from "ai";
 7 | 
 8 |   import ChatMessageActions from "./chat-message-actions.svelte";
 9 | 
10 |   export let message: Message;
11 |   const user = $page.data.session?.user;
12 | </script>
13 | 
14 | <div
15 |   class={cn("group relative mb-4 flex items-start md:-ml-12")}
16 |   {...$$restProps}
17 | >
18 |   <div
19 |     class={cn(
20 |       "flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow",
21 |       message.role === "user"
22 |         ? "bg-background"
23 |         : "bg-primary text-primary-foreground"
24 |     )}
25 |   >
26 |     {#if message.role === "user"}
27 |       <UserAvatar user={user ?? {}} />
28 |     {:else}
29 |       <Icons.ai />
30 |     {/if}
31 |   </div>
32 |   <div class="ml-4 flex-1 space-y-2 overflow-hidden px-1">
33 |     {message.content}
34 |   </div>
35 |   <ChatMessageActions {message} />
36 | </div>
37 | 


--------------------------------------------------------------------------------
/src/lib/components/chat/chat-sidebar-footer.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { cn } from "$lib/utils";
 3 | 
 4 |   let className: string | undefined | null = undefined;
 5 |   export { className as class };
 6 | </script>
 7 | 
 8 | <div
 9 |   class={cn("flex items-center justify-between p-4", className)}
10 |   {...$$restProps}
11 | >
12 |   <slot />
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/chat/chat-sidebar-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { page } from "$app/stores";
 3 |   import { Icons } from "$lib/components/icons";
 4 |   import { Button } from "$lib/components/ui/button";
 5 |   import {
 6 |     Tooltip,
 7 |     TooltipContent,
 8 |     TooltipTrigger,
 9 |   } from "$lib/components/ui/tooltip";
10 |   import type { Chat } from "$lib/types/db";
11 |   import { cn } from "$lib/utils";
12 | 
13 |   export let chat: Chat;
14 | 
15 |   $: isActive = $page.params.id === chat.id;
16 | </script>
17 | 
18 | <div class="relative">
19 |   <div class="absolute left-2 top-1 flex h-6 w-6 items-center justify-center">
20 |     {#if chat.sharePath}
21 |       <Tooltip>
22 |         <TooltipTrigger
23 |           tabindex={-1}
24 |           class="focus:bg-muted focus:ring-1 focus:ring-ring"
25 |         >
26 |           <Icons.users class="mr-2" />
27 |         </TooltipTrigger>
28 |         <TooltipContent>This is a shared chat.</TooltipContent>
29 |       </Tooltip>
30 |     {:else}
31 |       <Icons.message class="mr-2" />
32 |     {/if}
33 |   </div>
34 |   <Button
35 |     href={chat.path}
36 |     variant="ghost"
37 |     class={cn("group w-full pl-8 pr-16", isActive && "bg-accent")}
38 |   >
39 |     <div
40 |       class="relative max-h-5 flex-1 select-none overflow-hidden text-ellipsis break-all"
41 |       title={chat.name}
42 |     >
43 |       <span class="whitespace-nowrap">{chat.name}</span>
44 |     </div>
45 |   </Button>
46 |   {#if isActive}
47 |     <div class="absolute right-2 top-1">
48 |       <slot />
49 |     </div>
50 |   {/if}
51 | </div>
52 | 


--------------------------------------------------------------------------------
/src/lib/components/chat/chat-sidebar-list.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import SidebarActions from "$lib/components/chat/chat-sidebar-actions.svelte";
 3 |   import SidebarItem from "$lib/components/chat/chat-sidebar-item.svelte";
 4 |   import type { Chat } from "$lib/types/db";
 5 | 
 6 |   export let chats: Chat[];
 7 | 
 8 |   const removeChat = void 0;
 9 |   const shareChat = void 0;
10 | </script>
11 | 
12 | <div class="flex-1 overflow-auto">
13 |   {#if chats.length}
14 |     <div class="space-y-2 px-2">
15 |       {#each chats as chat (chat.id)}
16 |         <SidebarItem {chat}>
17 |           <SidebarActions {chat} />
18 |         </SidebarItem>
19 |       {/each}
20 |     </div>
21 |   {:else}
22 |     <div class="p-8 text-center">
23 |       <p class="text-sm text-muted-foreground">No chat history</p>
24 |     </div>
25 |   {/if}
26 | </div>
27 | 


--------------------------------------------------------------------------------
/src/lib/components/chat/chat-sidebar.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { Icons } from "$lib/components/icons";
 3 |   import { Button } from "$lib/components/ui/button";
 4 |   import {
 5 |     Sheet,
 6 |     SheetContent,
 7 |     SheetHeader,
 8 |     SheetTitle,
 9 |     SheetTrigger,
10 |   } from "$lib/components/ui/sheet";
11 | </script>
12 | 
13 | <Sheet>
14 |   <SheetTrigger>
15 |     <Button variant="ghost" class="-ml-2 h-9 w-9 p-0">
16 |       <Icons.sidebar class="h-6 w-6" />
17 |       <span class="sr-only">Toggle Sidebar</span>
18 |     </Button>
19 |   </SheetTrigger>
20 |   <SheetContent
21 |     class="inset-y-0 flex h-auto w-[300px] max-w-[300px] flex-col p-0"
22 |   >
23 |     <SheetHeader class="p-4">
24 |       <SheetTitle class="text-sm">Chat History</SheetTitle>
25 |     </SheetHeader>
26 |     <slot />
27 |   </SheetContent>
28 | </Sheet>
29 | 


--------------------------------------------------------------------------------
/src/lib/components/chat/chat.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { cn } from "$lib/utils";
 3 |   import { useChat, type Message } from "ai/svelte";
 4 |   import { toast } from "svelte-sonner";
 5 | 
 6 |   import ChatList from "./chat-list.svelte";
 7 |   import ChatPanel from "./chat-panel.svelte";
 8 |   import EmptyScreen from "./empty-screen.svelte";
 9 | 
10 |   export let id: string | undefined = undefined;
11 |   export let initialMessages: Message[] | undefined = undefined;
12 |   let className: string | undefined | null = undefined;
13 |   export { className as class };
14 | 
15 |   const { messages, append, reload, stop, isLoading, input } = useChat({
16 |     initialMessages,
17 |     id,
18 |     body: {
19 |       id,
20 |     },
21 |     onError: (err) => {
22 |       console.error(err);
23 |       toast.error("An unexpected error occurred. Please try again later.", {
24 |         description: err.message,
25 |       });
26 |     },
27 |   });
28 | </script>
29 | 
30 | <div class={cn("pb-[200px] pt-4 md:pt-10", className)}>
31 |   {#if $messages.length}
32 |     <ChatList {messages} />
33 |   {:else}
34 |     <EmptyScreen {input} />
35 |   {/if}
36 | </div>
37 | 
38 | <ChatPanel {id} {isLoading} {stop} {append} {reload} {messages} {input} />
39 | 


--------------------------------------------------------------------------------
/src/lib/components/chat/footer-text.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { cn } from "$lib/utils";
 3 | 
 4 |   let className: string | undefined | null = undefined;
 5 |   export { className as class };
 6 | </script>
 7 | 
 8 | <p
 9 |   class={cn(
10 |     "px-2 text-center text-xs leading-normal text-muted-foreground",
11 |     className
12 |   )}
13 |   {...$$restProps}
14 | >
15 |   Best in class
16 | </p>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/copy-button.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { Icons } from "$components/icons";
 3 |   import { cn } from "$lib/utils";
 4 |   import debounce from "lodash-es/debounce";
 5 |   import { clickToCopyAction } from "svelte-legos";
 6 |   import { toast } from "svelte-sonner";
 7 | 
 8 |   import { buttonVariants } from "./ui/button";
 9 | 
10 |   export let successMessage: string | undefined | null = undefined;
11 | 
12 |   let copied = false;
13 |   let className: string | undefined | null = undefined;
14 |   export let value = "";
15 |   export { className as class };
16 | 
17 |   const resetCopied = debounce(() => {
18 |     copied = false;
19 |   }, 3000);
20 | 
21 |   function handleCopyDone() {
22 |     copied = true;
23 |     resetCopied();
24 | 
25 |     toast.success(successMessage ?? "Copied to clipboard!");
26 |   }
27 | 
28 |   function handleCopyError() {
29 |     console.log("Error copying");
30 |     toast.error("An error occurred copying the value. Please try again.");
31 |   }
32 | </script>
33 | 
34 | <button
35 |   class={cn(buttonVariants({ size: "icon", variant: "ghost" }), className)}
36 |   use:clickToCopyAction={value}
37 |   on:copy-done={handleCopyDone}
38 |   on:copy-error={handleCopyError}
39 |   {...$$restProps}
40 | >
41 |   <span class="sr-only">Copy</span>
42 |   {#if copied}
43 |     <Icons.check class="h-5 w-5" />
44 |   {:else}
45 |     <Icons.copy class="h-5 w-5" />
46 |   {/if}
47 | </button>
48 | 


--------------------------------------------------------------------------------
/src/lib/components/external-link.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { cn } from "$lib/utils";
 3 | 
 4 |   export let href = "";
 5 |   export let className = "";
 6 |   export { className as class };
 7 | </script>
 8 | 
 9 | <a
10 |   {href}
11 |   target="_blank"
12 |   class={cn("inline-flex flex-1  gap-1 leading-4  hover:underline", className)}
13 | >
14 |   <span class="flex items-center gap-2"><slot /></span>
15 |   <svg
16 |     aria-hidden="true"
17 |     height="7"
18 |     viewBox="0 0 6 6"
19 |     width="7"
20 |     class="opacity-70"
21 |   >
22 |     <path
23 |       d="M1.25215 5.54731L0.622742 4.9179L3.78169 1.75597H1.3834L1.38936 0.890915H5.27615V4.78069H4.40513L4.41109 2.38538L1.25215 5.54731Z"
24 |       fill="currentColor"
25 |     ></path>
26 |   </svg>
27 | </a>
28 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/apple.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import type { IconProps } from "lucide-svelte";
 3 | 
 4 |   type $$Props = IconProps;
 5 | </script>
 6 | 
 7 | <svg role="img" viewBox="0 0 24 24" {...$$restProps}>
 8 |   <path
 9 |     d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
10 |     fill="currentColor"
11 |   />
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/aria.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import type { IconProps } from "lucide-svelte";
 3 | 
 4 |   type $$Props = IconProps;
 5 | </script>
 6 | 
 7 | <svg role="img" viewBox="0 0 24 24" fill="currentColor" {...$$restProps}>
 8 |   <path
 9 |     d="M13.966 22.624l-1.69-4.281H8.122l3.892-9.144 5.662 13.425zM8.884 1.376H0v21.248zm15.116 0h-8.884L24 22.624Z"
10 |   />
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/google.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import type { IconProps } from "lucide-svelte";
 3 | 
 4 |   type $$Props = IconProps;
 5 | </script>
 6 | 
 7 | <svg role="img" viewBox="0 0 48 48" {...$$restProps}>
 8 |   <path
 9 |     fill="#fbc02d"
10 |     d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12	s5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24s8.955,20,20,20	s20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"
11 |   ></path><path
12 |     fill="#e53935"
13 |     d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039	l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"
14 |   ></path><path
15 |     fill="#4caf50"
16 |     d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36	c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"
17 |   ></path><path
18 |     fill="#1565c0"
19 |     d="M43.611,20.083L43.595,20L42,20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571	c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
20 |   ></path>
21 | </svg>
22 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/logo.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import type { HTMLAttributes } from "svelte/elements";
 3 | 
 4 |   type $$Props = HTMLAttributes<SVGElement>;
 5 | </script>
 6 | 
 7 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...$$restProps}>
 8 |   <rect width="256" height="256" fill="none" />
 9 |   <line
10 |     x1="208"
11 |     y1="128"
12 |     x2="128"
13 |     y2="208"
14 |     fill="none"
15 |     stroke="#EB4F27"
16 |     stroke-linecap="round"
17 |     stroke-linejoin="round"
18 |     stroke-width="16"
19 |   />
20 |   <line
21 |     x1="192"
22 |     y1="40"
23 |     x2="40"
24 |     y2="192"
25 |     fill="none"
26 |     stroke="#EB4F27"
27 |     stroke-linecap="round"
28 |     stroke-linejoin="round"
29 |     stroke-width="16"
30 |   />
31 | </svg>
32 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/npm.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import type { IconProps } from "lucide-svelte";
 3 | 
 4 |   type $$Props = IconProps;
 5 | </script>
 6 | 
 7 | <svg viewBox="0 0 24 24" {...$$restProps}>
 8 |   <path
 9 |     d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"
10 |     fill="currentColor"
11 |   />
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/paypal.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import type { IconProps } from "lucide-svelte";
 3 | 
 4 |   type $$Props = IconProps;
 5 | </script>
 6 | 
 7 | <svg role="img" viewBox="0 0 24 24" {...$$restProps}>
 8 |   <path
 9 |     d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
10 |     fill="currentColor"
11 |   />
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/pnpm.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import type { IconProps } from "lucide-svelte";
 3 | 
 4 |   type $$Props = IconProps;
 5 | </script>
 6 | 
 7 | <svg viewBox="0 0 24 24" {...$$restProps}>
 8 |   <path
 9 |     d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z"
10 |     fill="currentColor"
11 |   />
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/radix-svelte.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import type { IconProps } from "lucide-svelte";
 3 | 
 4 |   type $$Props = IconProps;
 5 | </script>
 6 | 
 7 | <svg
 8 |   xmlns="http://www.w3.org/2000/svg"
 9 |   viewBox="0 0 24 24"
10 |   fill="none"
11 |   {...$$restProps}
12 | >
13 |   <path
14 |     fill-rule="evenodd"
15 |     clip-rule="evenodd"
16 |     d="M5.71429 4H14.8572C16.7507 4 18.2857 5.53502 18.2857 7.42857C18.2857 9.32213 16.7507 10.8571 14.8572 10.8571H12.5714V20H11.4286C8.27267 20 5.71429 17.4416 5.71429 14.2857V4ZM10.2857 10.8571H8.00001V14.2857C8.00001 15.7785 8.95408 17.0485 10.2857 17.5192V10.8571ZM8.00001 8.57143H14.8572C15.4883 8.57143 16 8.05975 16 7.42857C16 6.7974 15.4883 6.28571 14.8572 6.28571H8.00001V8.57143Z"
17 |     fill="currentcolor"
18 |   />
19 | </svg>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/radix.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import type { IconProps } from "lucide-svelte";
 3 | 
 4 |   type $$Props = IconProps;
 5 | </script>
 6 | 
 7 | <svg viewBox="0 0 25 25" fill="none" {...$$restProps}>
 8 |   <path
 9 |     d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z"
10 |     fill="currentcolor"
11 |   />
12 |   <path d="M12 0H4V8H12V0Z" fill="currentcolor" />
13 |   <path
14 |     d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"
15 |     fill="currentcolor"
16 |   />
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/src/lib/components/icons/tailwind.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import type { IconProps } from "lucide-svelte";
 3 | 
 4 |   type $$Props = IconProps;
 5 | </script>
 6 | 
 7 | <svg viewBox="0 0 24 24" {...$$restProps}>
 8 |   <path
 9 |     d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"
10 |     fill="currentColor"
11 |   />
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/src/lib/components/layout/container.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { cn } from "$lib/utils";
 3 | 
 4 |   import { containerVariants, type Variant } from "./container";
 5 | 
 6 |   let className: string | undefined | null = undefined;
 7 |   export let as: string = "section";
 8 |   export let variant: Variant = "default";
 9 |   export { className as class };
10 | </script>
11 | 
12 | <svelte:element
13 |   this={as}
14 |   class={cn(containerVariants({ variant, className }))}
15 |   {...$$restProps}
16 | >
17 |   <slot />
18 | </svelte:element>
19 | 


--------------------------------------------------------------------------------
/src/lib/components/layout/container.ts:
--------------------------------------------------------------------------------
 1 | import { tv, type VariantProps } from "tailwind-variants";
 2 | 
 3 | export const containerVariants = tv({
 4 |   base: "overflow-hidden py-12 md:py-16 [&>*]:mx-auto [&>*]:max-w-xl sm:[&>*]:max-w-2xl md:[&>*]:max-w-3xl lg:[&>*]:max-w-4xl",
 5 |   variants: {
 6 |     variant: {
 7 |       default: "",
 8 |       contrast: "bg-accent",
 9 |       main: "pt-8 sm:pt-16 lg:pt-20",
10 |       fullScreen: "h-screen -mt-20",
11 |       centered:
12 |         "container flex h-screen w-full max-w-full flex-col justify-center",
13 |     },
14 |   },
15 |   defaultVariants: {
16 |     variant: "default",
17 |   },
18 | });
19 | 
20 | export type Variant = VariantProps<typeof containerVariants>["variant"];
21 | 


--------------------------------------------------------------------------------
/src/lib/components/layout/heading.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { cn } from "$lib/utils";
 3 | 
 4 |   // import { headingVariants, type Variant } from "./heading";
 5 | 
 6 |   let className: string | undefined | null = undefined;
 7 |   // export let variant: Variant = "default";
 8 |   export let title: string;
 9 |   export let description: string | undefined = undefined;
10 |   export let descriptionClassName: string | undefined = undefined;
11 |   export let size: "default" | "large" = "default";
12 |   export { className as class };
13 | </script>
14 | 
15 | <div class={cn("grid gap-1", className)} {...$$props}>
16 |   <h2
17 |     class={cn(
18 |       "line-clamp-1 text-3xl font-bold tracking-tight",
19 |       size === "default" && "md:text-4xl"
20 |     )}
21 |   >
22 |     {title}
23 |   </h2>
24 |   {#if description}
25 |     <p
26 |       class={cn(
27 |         "line-clamp-2 text-muted-foreground",
28 |         size === "default" && "text-lg",
29 |         descriptionClassName
30 |       )}
31 |     >
32 |       {description}
33 |     </p>
34 |   {/if}
35 | </div>
36 | 


--------------------------------------------------------------------------------
/src/lib/components/layout/heading.ts:
--------------------------------------------------------------------------------
 1 | import { tv, type VariantProps } from "tailwind-variants";
 2 | 
 3 | export const headingVariants = tv({
 4 |   base: "text-3xl font-bold tracking-tight",
 5 |   variants: {
 6 |     variant: {
 7 |       default: "",
 8 |       contrast: "bg-accent",
 9 |       main: "pt-8 sm:pt-16 lg:pt-20",
10 |     },
11 |   },
12 |   defaultVariants: {
13 |     variant: "default",
14 |   },
15 | });
16 | 
17 | export type Variant = VariantProps<typeof headingVariants>["variant"];
18 | 


--------------------------------------------------------------------------------
/src/lib/components/layout/index.ts:
--------------------------------------------------------------------------------
1 | export { default as SiteFooter } from "./site-footer.svelte";
2 | export { default as SiteHeader } from "./site-header.svelte";
3 | export { default as SidebarNav } from "./sidebar-nav.svelte";
4 | export { default as Container } from "./container.svelte";
5 | export { default as Shell } from "./shell.svelte";
6 | export { default as Heading } from "./heading.svelte";
7 | 


--------------------------------------------------------------------------------
/src/lib/components/layout/main-nav.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { page } from "$app/stores";
 3 |   import { Icons } from "$components/icons";
 4 |   import { siteConfig } from "$lib/config/site";
 5 |   import { cn } from "$lib/utils";
 6 | 
 7 |   import { type NavItemWithOptionalChildren } from "../../types/nav";
 8 | 
 9 |   export let mainNavItems: NavItemWithOptionalChildren[] = siteConfig.mainNav;
10 | </script>
11 | 
12 | <a href="/" class="flex items-center space-x-2 mr-auto">
13 |   <Icons.logo class="h-6 w-6" />
14 |   <span class="hidden font-bold sm:inline-block">
15 |     {siteConfig.name}
16 |   </span>
17 | </a>
18 | 
19 | <nav class="flex items-center space-x-6 text-sm font-medium">
20 |   {#each mainNavItems as navItem}
21 |     <a
22 |       href={navItem.href}
23 |       class={cn(
24 |         "transition-colors hover:text-foreground/80",
25 |         $page.url.pathname === navItem.href
26 |           ? "text-foreground"
27 |           : "text-foreground/60"
28 |       )}
29 |       target={navItem.external ? "_blank" : undefined}
30 |       rel={navItem.external ? "noreferrer" : undefined}
31 |     >
32 |       {navItem.title}
33 |     </a>
34 |   {/each}
35 | </nav>
36 | 


--------------------------------------------------------------------------------
/src/lib/components/layout/mobile-link.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { page } from "$app/stores";
 3 |   import { cn } from "$lib/utils";
 4 | 
 5 |   export let href: string;
 6 |   export let open: boolean;
 7 | 
 8 |   let className: string | undefined | null = undefined;
 9 |   export { className as class };
10 | </script>
11 | 
12 | <a
13 |   {href}
14 |   on:click={() => (open = false)}
15 |   class={cn(
16 |     $page.url.pathname === href ? "text-foreground" : "text-foreground/60",
17 |     className
18 |   )}
19 |   {...$$restProps}
20 | >
21 |   <slot />
22 | </a>
23 | 


--------------------------------------------------------------------------------
/src/lib/components/layout/page-layout-md.svelte:
--------------------------------------------------------------------------------
1 | <div>
2 |   <slot />
3 | </div>
4 | 


--------------------------------------------------------------------------------
/src/lib/components/layout/shell.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { cn } from "$lib/utils";
 3 | 
 4 |   import { shellVariants, type Variant } from "./shell";
 5 | 
 6 |   let className: string | undefined | null = undefined;
 7 |   export let as: string = "div";
 8 |   export let variant: Variant = "default";
 9 |   export { className as class };
10 | </script>
11 | 
12 | <svelte:element
13 |   this={as}
14 |   class={cn(shellVariants({ variant, className }))}
15 |   {...$$restProps}
16 | >
17 |   <slot />
18 | </svelte:element>
19 | 


--------------------------------------------------------------------------------
/src/lib/components/layout/shell.ts:
--------------------------------------------------------------------------------
 1 | import { tv, type VariantProps } from "tailwind-variants";
 2 | 
 3 | export const shellVariants = tv({
 4 |   base: "grid items-center gap-8 w-full p-4 md:p-8",
 5 |   variants: {
 6 |     variant: {
 7 |       default: "",
 8 |       container: "container",
 9 |       page: "px-0 md:px-0",
10 |       auth: "container max-w-lg p-0 lg:p-0 max-h-full",
11 |       fullScreen: "h-screen -mt-16",
12 |       markdown: "container max-w-3xl p-8 md:p-10 lg:p-10 gap-0",
13 |     },
14 |   },
15 |   defaultVariants: {
16 |     variant: "default",
17 |   },
18 | });
19 | 
20 | export type Variant = VariantProps<typeof shellVariants>["variant"];
21 | 


--------------------------------------------------------------------------------
/src/lib/components/layout/sidebar-nav-items.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { page } from "$app/stores";
 3 |   import { Icons } from "$lib/components/icons";
 4 |   import type { SidebarNavItem } from "$lib/types/nav";
 5 |   import { cn } from "$lib/utils";
 6 | 
 7 |   export let items: SidebarNavItem[] = [];
 8 | </script>
 9 | 
10 | {#if items.length}
11 |   <div class="grid grid-flow-row auto-rows-max text-md">
12 |     {#each items as item, index (index)}
13 |       {#if item.href}
14 |         <a
15 |           key={index}
16 |           href={item.href}
17 |           target={item.external ? "_blank" : ""}
18 |           rel={item.external ? "noreferrer" : ""}
19 |         >
20 |           <span
21 |             class={cn(
22 |               "group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:bg-muted hover:text-foreground",
23 |               $page.url.pathname === item.href
24 |                 ? "bg-muted font-medium text-foreground"
25 |                 : "text-muted-foreground",
26 |               item.disabled && "pointer-events-none opacity-60"
27 |             )}
28 |           >
29 |             <svelte:component
30 |               this={Icons[item.icon]}
31 |               class="mr-2 h-4 w-4"
32 |               aria-hidden="true"
33 |             />
34 |             <span>{item.title}</span>
35 |           </span>
36 |         </a>
37 |       {:else}
38 |         <span
39 |           class="flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground hover:underline"
40 |         >
41 |           {item.title}
42 |         </span>
43 |       {/if}
44 |     {/each}
45 |   </div>
46 | {/if}
47 | 


--------------------------------------------------------------------------------
/src/lib/components/layout/sidebar-nav.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { Separator } from "$lib/components/ui/separator";
 3 |   import type { SidebarNavItem } from "$lib/types/nav";
 4 |   import { cn } from "$lib/utils";
 5 | 
 6 |   import DocsSidebarNavItems from "./sidebar-nav-items.svelte";
 7 | 
 8 |   export let items: SidebarNavItem[] = [];
 9 | </script>
10 | 
11 | <div class="flex h-full w-full overflow-auto">
12 |   {#if items.length}
13 |     <div class="w-full min-h-full py-6 pr-4">
14 |       {#each items as item, index (index)}
15 |         {#if item.children}
16 |           <div class={cn("pb-4")}>
17 |             {#if item.href}
18 |               <a href={item.href}>
19 |                 <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
20 |                   {item.title}
21 |                 </h4>
22 |               </a>
23 |             {:else}
24 |               <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
25 |                 {item.title}
26 |               </h4>
27 |             {/if}
28 | 
29 |             {#if item?.items}
30 |               {#if item?.items?.length}
31 |                 <DocsSidebarNavItems items={item.items} />
32 |               {/if}
33 |             {/if}
34 |           </div>
35 |         {:else}
36 |           <DocsSidebarNavItems items={[item]} />
37 |         {/if}
38 |       {/each}
39 |     </div>
40 |   {/if}
41 | 
42 |   <Separator orientation="vertical" class="h-full" />
43 | </div>
44 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/a.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { cn } from "$lib/utils";
 3 | 
 4 |   let className: string | undefined | null = undefined;
 5 |   export { className as class };
 6 |   export let href: string;
 7 |   $: internal = href.startsWith("/") || href.startsWith("#");
 8 | 
 9 |   $: rel = !internal ? "noopener noreferrer" : undefined;
10 |   $: target = !internal ? "_blank" : undefined;
11 | </script>
12 | 
13 | <a
14 |   {href}
15 |   {target}
16 |   {rel}
17 |   class={cn("font-medium underline underline-offset-4", className)}
18 |   {...$$restProps}
19 | >
20 |   <slot />
21 | </a>
22 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/blockquote.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 
 4 | 	let className: string | undefined | null = undefined;
 5 | 	export { className as class };
 6 | </script>
 7 | 
 8 | <blockquote
 9 | 	class={cn("mt-6 border-l-2 pl-6 italic", className)}
10 | 	{...$$restProps}
11 | >
12 | 	<slot />
13 | </blockquote>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/h1.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 
 4 | 	let className: string | undefined | null = undefined;
 5 | 	export { className as class };
 6 | </script>
 7 | 
 8 | <h1
 9 | 	class={cn("mt-2 scroll-m-20 text-4xl font-bold", className)}
10 | 	{...$$restProps}
11 | >
12 | 	<slot />
13 | </h1>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/h2.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 
 4 | 	let className: string | undefined | null = undefined;
 5 | 	export { className as class };
 6 | </script>
 7 | 
 8 | <h2
 9 | 	class={cn(
10 | 		"mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0",
11 | 		className
12 | 	)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </h2>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/h3.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 
 4 | 	let className: string | undefined | null = undefined;
 5 | 	export { className as class };
 6 | </script>
 7 | 
 8 | <h3
 9 | 	class={cn(
10 | 		"mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
11 | 		className
12 | 	)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </h3>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/h4.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 
 4 | 	let className: string | undefined | null = undefined;
 5 | 	export { className as class };
 6 | </script>
 7 | 
 8 | <h4
 9 | 	class={cn(
10 | 		"mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
11 | 		className
12 | 	)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </h4>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/h5.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 
 4 | 	let className: string | undefined | null = undefined;
 5 | 	export { className as class };
 6 | </script>
 7 | 
 8 | <h5
 9 | 	class={cn(
10 | 		"mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
11 | 		className
12 | 	)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </h5>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/h6.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 
 4 | 	let className: string | undefined | null = undefined;
 5 | 	export { className as class };
 6 | </script>
 7 | 
 8 | <h6
 9 | 	class={cn(
10 | 		"mt-8 scroll-m-20 text-base font-semibold tracking-tight",
11 | 		className
12 | 	)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </h6>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/hr.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 | 	import { cn } from "$lib/utils";
3 | 
4 | 	let className: string | undefined | null = undefined;
5 | 	export { className as class };
6 | </script>
7 | 
8 | <hr class={cn("my-4 md:my-8", className)} {...$$restProps} />
9 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/img.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLImgAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	let className: string | undefined | null = undefined;
 6 | 	export { className as class };
 7 | 	export let src: HTMLImgAttributes["src"] = undefined;
 8 | 	export let alt: HTMLImgAttributes["alt"] = undefined;
 9 | </script>
10 | 
11 | <img {src} {alt} class={cn("rounded-md", className)} {...$$restProps} />
12 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as a } from "./a.svelte";
 2 | export { default as blockquote } from "./blockquote.svelte";
 3 | export { default as h1 } from "./h1.svelte";
 4 | export { default as h2 } from "./h2.svelte";
 5 | export { default as h3 } from "./h3.svelte";
 6 | export { default as h4 } from "./h4.svelte";
 7 | export { default as h5 } from "./h5.svelte";
 8 | export { default as h6 } from "./h6.svelte";
 9 | export { default as hr } from "./hr.svelte";
10 | export { default as img } from "./img.svelte";
11 | export { default as li } from "./li.svelte";
12 | export { default as ol } from "./ol.svelte";
13 | export { default as p } from "./p.svelte";
14 | export { default as pre } from "./pre.svelte";
15 | export { default as table } from "./table.svelte";
16 | export { default as td } from "./td.svelte";
17 | export { default as th } from "./th.svelte";
18 | export { default as tr } from "./tr.svelte";
19 | export { default as ul } from "./ul.svelte";
20 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/li.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 
 4 | 	let className: string | undefined | null = undefined;
 5 | 	export { className as class };
 6 | </script>
 7 | 
 8 | <li class={cn("mt-2", className)} {...$$restProps}>
 9 | 	<slot />
10 | </li>
11 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/mdsvex.svelte:
--------------------------------------------------------------------------------
 1 | <!-- MDsveX Layout Component -->
 2 | <script context="module">
 3 |   import "../../../styles/mdsvex.css";
 4 | 
 5 |   import {
 6 |     a,
 7 |     blockquote,
 8 |     h1,
 9 |     h2,
10 |     h3,
11 |     h4,
12 |     h5,
13 |     h6,
14 |     hr,
15 |     img,
16 |     li,
17 |     ol,
18 |     p,
19 |     pre,
20 |     table,
21 |     td,
22 |     th,
23 |     tr,
24 |     ul,
25 |   } from "$components/mdsvex";
26 | 
27 |   export {
28 |     a,
29 |     blockquote,
30 |     h1,
31 |     h2,
32 |     h3,
33 |     h4,
34 |     h5,
35 |     h6,
36 |     hr,
37 |     img,
38 |     li,
39 |     ol,
40 |     p,
41 |     pre,
42 |     table,
43 |     td,
44 |     th,
45 |     tr,
46 |     ul,
47 |   };
48 | </script>
49 | 
50 | <script lang="ts">
51 |   export let title = "";
52 |   export let description = "";
53 | </script>
54 | 
55 | <slot {title} {description} />
56 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/ol.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 
 4 | 	let className: string | undefined | null = undefined;
 5 | 	export { className as class };
 6 | </script>
 7 | 
 8 | <ol class={cn("my-6 ml-6 list-decimal", className)} {...$$restProps}>
 9 | 	<slot />
10 | </ol>
11 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/p.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 
 4 | 	let className: string | undefined | null = undefined;
 5 | 	export { className as class };
 6 | </script>
 7 | 
 8 | <p
 9 | 	class={cn("leading-7 [&:not(:first-child)]:mt-6", className)}
10 | 	{...$$restProps}
11 | >
12 | 	<slot />
13 | </p>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/pre.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import CopyButton from "$components/copy-button.svelte";
 3 |   import { cn } from "$lib/utils";
 4 | 
 5 |   let className: string | undefined | null = undefined;
 6 |   export { className as class };
 7 | 
 8 |   let codeString: string;
 9 | 
10 |   function copyCodeToClipboard(node: HTMLPreElement) {
11 |     codeString = node.innerText.trim() ?? "";
12 |   }
13 | </script>
14 | 
15 | <pre
16 |   use:copyCodeToClipboard
17 |   class={cn(
18 |     "mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900",
19 |     className
20 |   )}
21 |   {...$$restProps}>
22 | 	<slot />
23 | </pre>
24 | <CopyButton
25 |   value={codeString}
26 |   class={cn("absolute right-4 top-4 pre-copy-btn")}
27 | />
28 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/table.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 
 4 | 	let className: string | undefined | null = undefined;
 5 | 	export { className as class };
 6 | </script>
 7 | 
 8 | <div class="my-6 w-full overflow-y-auto">
 9 | 	<table class={cn("w-full", className)} {...$$restProps}>
10 | 		<slot />
11 | 	</table>
12 | </div>
13 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/td.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 
 4 | 	let className: string | undefined | null = undefined;
 5 | 	export { className as class };
 6 | </script>
 7 | 
 8 | <td
 9 | 	class={cn(
10 | 		"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
11 | 		className
12 | 	)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </td>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/th.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 
 4 | 	let className: string | undefined | null = undefined;
 5 | 	export { className as class };
 6 | </script>
 7 | 
 8 | <th
 9 | 	class={cn(
10 | 		"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
11 | 		className
12 | 	)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </th>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/tr.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 
 4 | 	let className: string | undefined | null = undefined;
 5 | 	export { className as class };
 6 | </script>
 7 | 
 8 | <tr class={cn("m-0 border-t p-0 even:bg-muted", className)} {...$$restProps}>
 9 | 	<slot />
10 | </tr>
11 | 


--------------------------------------------------------------------------------
/src/lib/components/mdsvex/ul.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 
 4 | 	let className: string | undefined | null = undefined;
 5 | 	export { className as class };
 6 | </script>
 7 | 
 8 | <ul class={cn("my-6 ml-6 list-disc", className)} {...$$restProps}>
 9 | 	<slot />
10 | </ul>
11 | 


--------------------------------------------------------------------------------
/src/lib/components/svelte-themes/constants.ts:
--------------------------------------------------------------------------------
1 | export const colorSchemes = ["light", "dark"];
2 | export const MEDIA = "(prefers-color-scheme: dark)";
3 | 


--------------------------------------------------------------------------------
/src/lib/components/svelte-themes/helpers.ts:
--------------------------------------------------------------------------------
 1 | import { MEDIA } from "./constants";
 2 | import type { ThemeStore } from "./index";
 3 | 
 4 | export const getTheme = (
 5 |   key: string,
 6 |   fallback?: string
 7 | ): string | undefined => {
 8 |   if (typeof window === "undefined") return undefined;
 9 |   let theme;
10 |   try {
11 |     theme = localStorage.getItem(key) || undefined;
12 |   } catch (e) {
13 |     // Unsupported
14 |   }
15 |   return theme || fallback;
16 | };
17 | 
18 | export const getResolvedTheme = (theme: string, themes: string[]): string => {
19 |   if (theme === "system") {
20 |     const systemTheme = getSystemTheme();
21 |     return themes.includes(systemTheme) ? systemTheme : themes[0];
22 |   }
23 |   return theme;
24 | };
25 | 
26 | export const disableAnimation = () => {
27 |   const css = document.createElement("style");
28 |   css.appendChild(
29 |     document.createTextNode(
30 |       `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`
31 |     )
32 |   );
33 |   document.head.appendChild(css);
34 | 
35 |   return () => {
36 |     // Force restyle
37 |     (() => window.getComputedStyle(document.body))();
38 | 
39 |     // Wait for next tick before removing
40 |     setTimeout(() => {
41 |       document.head.removeChild(css);
42 |     }, 1);
43 |   };
44 | };
45 | 
46 | export const getSystemTheme = (
47 |   e?: MediaQueryList
48 | ): ThemeStore["systemTheme"] => {
49 |   if (!e) {
50 |     e = window.matchMedia(MEDIA);
51 |   }
52 | 
53 |   const isDark = e.matches;
54 |   const systemTheme = isDark ? "dark" : "light";
55 |   return systemTheme;
56 | };
57 | 


--------------------------------------------------------------------------------
/src/lib/components/svelte-themes/index.ts:
--------------------------------------------------------------------------------
 1 | import { writable } from "svelte/store";
 2 | 
 3 | export interface ThemeStore {
 4 |   /** List of all available theme names */
 5 |   themes: string[];
 6 |   /** Forced theme name for the current page */
 7 |   forcedTheme?: string;
 8 |   /** Update the theme */
 9 |   /** Active theme name */
10 |   theme?: string;
11 |   /** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
12 |   resolvedTheme?: string;
13 |   /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
14 |   systemTheme?: "dark" | "light";
15 | }
16 | 
17 | const themeStore = writable<ThemeStore>({
18 |   themes: [],
19 |   forcedTheme: undefined,
20 |   theme: undefined,
21 |   resolvedTheme: undefined,
22 |   systemTheme: undefined,
23 | });
24 | 
25 | export const setTheme = (theme: string): void => {
26 |   themeStore.update((store) => ({ ...store, theme }));
27 | };
28 | export default themeStore;
29 | 


--------------------------------------------------------------------------------
/src/lib/components/toaster.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import themeStore from "$components/svelte-themes";
 3 |   import { Toaster } from "svelte-sonner";
 4 | </script>
 5 | 
 6 | <Toaster
 7 |   position="bottom-right"
 8 |   theme={$themeStore.resolvedTheme}
 9 |   toastOptions={{}}
10 |   closeButton
11 |   richColors
12 | />
13 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/accordion/accordion-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Accordion as AccordionPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import { slide } from "svelte/transition";
 5 | 
 6 | 	type $$Props = AccordionPrimitive.ContentProps;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export let transition: $$Props["transition"] = slide;
10 | 	export let transitionConfig: $$Props["transitionConfig"] = {
11 | 		duration: 200
12 | 	};
13 | 
14 | 	export { className as class };
15 | </script>
16 | 
17 | <AccordionPrimitive.Content
18 | 	class={cn("overflow-hidden text-sm", className)}
19 | 	{transition}
20 | 	{transitionConfig}
21 | 	{...$$restProps}
22 | >
23 | 	<div class="pb-4 pt-0">
24 | 		<slot />
25 | 	</div>
26 | </AccordionPrimitive.Content>
27 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/accordion/accordion-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Accordion as AccordionPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = AccordionPrimitive.ItemProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | 	export let value: $$Props["value"];
10 | </script>
11 | 
12 | <AccordionPrimitive.Item
13 | 	{value}
14 | 	class={cn("border-b", className)}
15 | 	{...$$restProps}
16 | >
17 | 	<slot />
18 | </AccordionPrimitive.Item>
19 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/accordion/accordion-trigger.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Accordion as AccordionPrimitive } from "bits-ui";
 3 | 	import { ChevronDown } from "radix-icons-svelte";
 4 | 	import { cn } from "$lib/utils";
 5 | 
 6 | 	type $$Props = AccordionPrimitive.TriggerProps;
 7 | 	type $$Events = AccordionPrimitive.TriggerEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let level: AccordionPrimitive.HeaderProps["level"] = 3;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <AccordionPrimitive.Header {level} class="flex">
15 | 	<AccordionPrimitive.Trigger
16 | 		class={cn(
17 | 			"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
18 | 			className
19 | 		)}
20 | 		{...$$restProps}
21 | 		on:click
22 | 	>
23 | 		<slot />
24 | 		<ChevronDown
25 | 			class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
26 | 		/>
27 | 	</AccordionPrimitive.Trigger>
28 | </AccordionPrimitive.Header>
29 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/accordion/index.ts:
--------------------------------------------------------------------------------
 1 | import { Accordion as AccordionPrimitive } from "bits-ui";
 2 | import Content from "./accordion-content.svelte";
 3 | import Item from "./accordion-item.svelte";
 4 | import Trigger from "./accordion-trigger.svelte";
 5 | 
 6 | const Root = AccordionPrimitive.Root;
 7 | export {
 8 | 	Root,
 9 | 	Content,
10 | 	Item,
11 | 	Trigger,
12 | 	//
13 | 	Root as Accordion,
14 | 	Content as AccordionContent,
15 | 	Item as AccordionItem,
16 | 	Trigger as AccordionTrigger
17 | };
18 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 3 | 	import { buttonVariants } from "$lib/components/ui/button";
 4 | 	import { cn } from "$lib/utils";
 5 | 
 6 | 	type $$Props = AlertDialogPrimitive.ActionProps;
 7 | 	type $$Events = AlertDialogPrimitive.ActionEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <AlertDialogPrimitive.Action
14 | 	class={cn(buttonVariants(), className)}
15 | 	{...$$restProps}
16 | 	on:click
17 | 	on:keydown
18 | 	let:builder
19 | >
20 | 	<slot {builder} />
21 | </AlertDialogPrimitive.Action>
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 3 | 	import { buttonVariants } from "$lib/components/ui/button";
 4 | 	import { cn } from "$lib/utils";
 5 | 
 6 | 	type $$Props = AlertDialogPrimitive.CancelProps;
 7 | 	type $$Events = AlertDialogPrimitive.CancelEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <AlertDialogPrimitive.Cancel
14 | 	class={cn(
15 | 		buttonVariants({ variant: "outline" }),
16 | 		"mt-2 sm:mt-0",
17 | 		className
18 | 	)}
19 | 	{...$$restProps}
20 | 	on:click
21 | 	on:keydown
22 | 	let:builder
23 | >
24 | 	<slot {builder} />
25 | </AlertDialogPrimitive.Cancel>
26 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 3 | 	import * as AlertDialog from ".";
 4 | 	import { cn, flyAndScale } from "$lib/utils";
 5 | 
 6 | 	type $$Props = AlertDialogPrimitive.ContentProps;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export let transition: $$Props["transition"] = flyAndScale;
10 | 	export let transitionConfig: $$Props["transitionConfig"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <AlertDialog.Portal>
15 | 	<AlertDialog.Overlay />
16 | 	<AlertDialogPrimitive.Content
17 | 		{transition}
18 | 		{transitionConfig}
19 | 		class={cn(
20 | 			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg  sm:rounded-lg md:w-full",
21 | 			className
22 | 		)}
23 | 		{...$$restProps}
24 | 	>
25 | 		<slot />
26 | 	</AlertDialogPrimitive.Content>
27 | </AlertDialog.Portal>
28 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = AlertDialogPrimitive.DescriptionProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <AlertDialogPrimitive.Description
12 | 	class={cn("text-sm text-muted-foreground", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </AlertDialogPrimitive.Description>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div
12 | 	class={cn(
13 | 		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
14 | 		className
15 | 	)}
16 | 	{...$$restProps}
17 | >
18 | 	<slot />
19 | </div>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div
12 | 	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import { fade } from "svelte/transition";
 5 | 
 6 | 	type $$Props = AlertDialogPrimitive.OverlayProps;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export let transition: $$Props["transition"] = fade;
10 | 	export let transitionConfig: $$Props["transitionConfig"] = {
11 | 		duration: 150
12 | 	};
13 | 	export { className as class };
14 | </script>
15 | 
16 | <AlertDialogPrimitive.Overlay
17 | 	{transition}
18 | 	{transitionConfig}
19 | 	class={cn(
20 | 		"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm",
21 | 		className
22 | 	)}
23 | 	{...$$restProps}
24 | />
25 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 3 | 
 4 | 	type $$Props = AlertDialogPrimitive.PortalProps;
 5 | </script>
 6 | 
 7 | <AlertDialogPrimitive.Portal {...$$restProps}>
 8 | 	<slot />
 9 | </AlertDialogPrimitive.Portal>
10 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = AlertDialogPrimitive.TitleProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let level: $$Props["level"] = "h3";
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <AlertDialogPrimitive.Title
13 | 	class={cn("text-lg font-semibold", className)}
14 | 	{level}
15 | 	{...$$restProps}
16 | >
17 | 	<slot />
18 | </AlertDialogPrimitive.Title>
19 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert-dialog/index.ts:
--------------------------------------------------------------------------------
 1 | import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 2 | 
 3 | const Root = AlertDialogPrimitive.Root;
 4 | const Trigger = AlertDialogPrimitive.Trigger;
 5 | 
 6 | import Title from "./alert-dialog-title.svelte";
 7 | import Action from "./alert-dialog-action.svelte";
 8 | import Cancel from "./alert-dialog-cancel.svelte";
 9 | import Portal from "./alert-dialog-portal.svelte";
10 | import Footer from "./alert-dialog-footer.svelte";
11 | import Header from "./alert-dialog-header.svelte";
12 | import Overlay from "./alert-dialog-overlay.svelte";
13 | import Content from "./alert-dialog-content.svelte";
14 | import Description from "./alert-dialog-description.svelte";
15 | 
16 | export {
17 | 	Root,
18 | 	Title,
19 | 	Action,
20 | 	Cancel,
21 | 	Portal,
22 | 	Footer,
23 | 	Header,
24 | 	Trigger,
25 | 	Overlay,
26 | 	Content,
27 | 	Description,
28 | 	//
29 | 	Root as AlertDialog,
30 | 	Title as AlertDialogTitle,
31 | 	Action as AlertDialogAction,
32 | 	Cancel as AlertDialogCancel,
33 | 	Portal as AlertDialogPortal,
34 | 	Footer as AlertDialogFooter,
35 | 	Header as AlertDialogHeader,
36 | 	Trigger as AlertDialogTrigger,
37 | 	Overlay as AlertDialogOverlay,
38 | 	Content as AlertDialogContent,
39 | 	Description as AlertDialogDescription
40 | };
41 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert/alert-description.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
12 | 	<slot />
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert/alert-title.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 	import type { HeadingLevel } from ".";
 5 | 
 6 | 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 7 | 		level?: HeadingLevel;
 8 | 	};
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export let level: $$Props["level"] = "h5";
12 | 	export { className as class };
13 | </script>
14 | 
15 | <svelte:element
16 | 	this={level}
17 | 	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
18 | 	{...$$restProps}
19 | >
20 | 	<slot />
21 | </svelte:element>
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert/alert.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 	import { alertVariants, type Variant } from ".";
 5 | 
 6 | 	type $$Props = HTMLAttributes<HTMLDivElement> & {
 7 | 		variant?: Variant;
 8 | 	};
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export let variant: $$Props["variant"] = "default";
12 | 	export { className as class };
13 | </script>
14 | 
15 | <div
16 | 	class={cn(alertVariants({ variant }), className)}
17 | 	{...$$restProps}
18 | 	role="alert"
19 | >
20 | 	<slot />
21 | </div>
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert/index.ts:
--------------------------------------------------------------------------------
 1 | import { tv, type VariantProps } from "tailwind-variants";
 2 | 
 3 | import Root from "./alert.svelte";
 4 | import Description from "./alert-description.svelte";
 5 | import Title from "./alert-title.svelte";
 6 | 
 7 | export const alertVariants = tv({
 8 | 	base: "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
 9 | 	variants: {
10 | 		variant: {
11 | 			default: "bg-background text-foreground",
12 | 			destructive:
13 | 				"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
14 | 		}
15 | 	},
16 | 	defaultVariants: {
17 | 		variant: "default"
18 | 	}
19 | });
20 | 
21 | export type Variant = VariantProps<typeof alertVariants>["variant"];
22 | export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
23 | 
24 | export {
25 | 	Root,
26 | 	Description,
27 | 	Title,
28 | 	//
29 | 	Root as Alert,
30 | 	Description as AlertDescription,
31 | 	Title as AlertTitle
32 | };
33 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/aspect-ratio/aspect-ratio.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
 3 | 
 4 | 	type $$Props = AspectRatioPrimitive.Props;
 5 | 
 6 | 	export let ratio: $$Props["ratio"] = 4 / 3;
 7 | </script>
 8 | 
 9 | <AspectRatioPrimitive.Root {ratio} {...$$restProps}>
10 | 	<slot />
11 | </AspectRatioPrimitive.Root>
12 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/aspect-ratio/index.ts:
--------------------------------------------------------------------------------
1 | import Root from "./aspect-ratio.svelte";
2 | 
3 | export { Root, Root as AspectRatio };
4 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/avatar/avatar-fallback.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Avatar as AvatarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = AvatarPrimitive.FallbackProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <AvatarPrimitive.Fallback
12 | 	class={cn(
13 | 		"flex h-full w-full items-center justify-center rounded-full bg-muted",
14 | 		className
15 | 	)}
16 | 	{...$$restProps}
17 | >
18 | 	<slot />
19 | </AvatarPrimitive.Fallback>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/avatar/avatar-image.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Avatar as AvatarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = AvatarPrimitive.ImageProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let src: $$Props["src"] = undefined;
 9 | 	export let alt: $$Props["alt"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <AvatarPrimitive.Image
14 | 	{src}
15 | 	{alt}
16 | 	class={cn("aspect-square h-full w-full", className)}
17 | 	{...$$restProps}
18 | />
19 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/avatar/avatar.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Avatar as AvatarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = AvatarPrimitive.Props;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let delayMs: $$Props["delayMs"] = undefined;
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <AvatarPrimitive.Root
13 | 	{delayMs}
14 | 	class={cn(
15 | 		"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 | 		className
17 | 	)}
18 | 	{...$$restProps}
19 | >
20 | 	<slot />
21 | </AvatarPrimitive.Root>
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/avatar/index.ts:
--------------------------------------------------------------------------------
 1 | import Root from "./avatar.svelte";
 2 | import Image from "./avatar-image.svelte";
 3 | import Fallback from "./avatar-fallback.svelte";
 4 | 
 5 | export {
 6 | 	Root,
 7 | 	Image,
 8 | 	Fallback,
 9 | 	//
10 | 	Root as Avatar,
11 | 	Image as AvatarImage,
12 | 	Fallback as AvatarFallback
13 | };
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/badge/badge.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import { badgeVariants, type Variant } from ".";
 4 | 
 5 | 	let className: string | undefined | null = undefined;
 6 | 	export let href: string | undefined = undefined;
 7 | 	export let variant: Variant = "default";
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <svelte:element
12 | 	this={href ? "a" : "span"}
13 | 	{href}
14 | 	class={cn(badgeVariants({ variant, className }))}
15 | 	{...$$restProps}
16 | >
17 | 	<slot />
18 | </svelte:element>
19 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/badge/index.ts:
--------------------------------------------------------------------------------
 1 | import { tv, type VariantProps } from "tailwind-variants";
 2 | 
 3 | export { default as Badge } from "./badge.svelte";
 4 | export const badgeVariants = tv({
 5 | 	base: "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none",
 6 | 	variants: {
 7 | 		variant: {
 8 | 			default:
 9 | 				"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
10 | 			secondary:
11 | 				"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
12 | 			destructive:
13 | 				"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
14 | 			outline: "text-foreground"
15 | 		}
16 | 	},
17 | 	defaultVariants: {
18 | 		variant: "default"
19 | 	}
20 | });
21 | 
22 | export type Variant = VariantProps<typeof badgeVariants>["variant"];
23 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/button/button.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Button as ButtonPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import { buttonVariants, type Props, type Events } from ".";
 5 | 	import {Icons} from "$components/icons";
 6 | 
 7 | 	type $$Props = Props;
 8 | 	type $$Events = Events;
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export let variant: $$Props["variant"] = "default";
12 | 	export let size: $$Props["size"] = "default";
13 | 	export let builders: $$Props["builders"] = [];
14 | 	export let loading: $$Props["loading"] = false;
15 | 
16 | 	export { className as class };
17 | </script>
18 | 
19 | <ButtonPrimitive.Root
20 | 	{builders}
21 | 	class={cn(buttonVariants({ variant, size, className }))}
22 | 	disabled={loading ?? $$restProps?.disabled}
23 | 	{...$$restProps}
24 | 	on:click
25 | 	on:keydown
26 | >
27 | 	{#if loading}
28 | 		<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
29 | 		<span class="sr-only">Loading</span>
30 | 	{/if}
31 | 	<slot />
32 | </ButtonPrimitive.Root>
33 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/card/card-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div class={cn("p-6 pt-0", className)} {...$$restProps}>
12 | 	<slot />
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/card/card-description.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLParagraphElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
12 | 	<slot />
13 | </p>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/card/card-footer.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
12 | 	<slot />
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/card/card-header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
12 | 	<slot />
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/card/card-title.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import type { HeadingLevel } from ".";
 5 | 
 6 | 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 7 | 		tag?: HeadingLevel;
 8 | 	};
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export let tag: $$Props["tag"] = "h3";
12 | 	export { className as class };
13 | </script>
14 | 
15 | <svelte:element
16 | 	this={tag}
17 | 	class={cn("font-semibold leading-none tracking-tight", className)}
18 | 	{...$$restProps}
19 | >
20 | 	<slot />
21 | </svelte:element>
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/card/card.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <!-- svelte-ignore a11y-no-static-element-interactions -->
12 | <div
13 | 	class={cn(
14 | 		"rounded-xl border bg-card text-card-foreground shadow",
15 | 		className
16 | 	)}
17 | 	{...$$restProps}
18 | 	on:click
19 | 	on:focusin
20 | 	on:focusout
21 | 	on:mouseenter
22 | 	on:mouseleave
23 | >
24 | 	<slot />
25 | </div>
26 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/card/index.ts:
--------------------------------------------------------------------------------
 1 | import Root from "./card.svelte";
 2 | import Content from "./card-content.svelte";
 3 | import Description from "./card-description.svelte";
 4 | import Footer from "./card-footer.svelte";
 5 | import Header from "./card-header.svelte";
 6 | import Title from "./card-title.svelte";
 7 | 
 8 | export {
 9 | 	Root,
10 | 	Content,
11 | 	Description,
12 | 	Footer,
13 | 	Header,
14 | 	Title,
15 | 	//
16 | 	Root as Card,
17 | 	Content as CardContent,
18 | 	Description as CardDescription,
19 | 	Footer as CardFooter,
20 | 	Header as CardHeader,
21 | 	Title as CardTitle
22 | };
23 | 
24 | export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
25 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/checkbox/checkbox.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Checkbox as CheckboxPrimitive } from "bits-ui";
 3 | 	import { Check, Minus } from "radix-icons-svelte";
 4 | 	import { cn } from "$lib/utils";
 5 | 
 6 | 	type $$Props = CheckboxPrimitive.Props;
 7 | 	type $$Events = CheckboxPrimitive.Events;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let checked: $$Props["checked"] = false;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <CheckboxPrimitive.Root
15 | 	class={cn(
16 | 		"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
17 | 		className
18 | 	)}
19 | 	bind:checked
20 | 	on:click
21 | 	{...$$restProps}
22 | >
23 | 	<CheckboxPrimitive.Indicator
24 | 		class={cn("flex items-center justify-center text-current h-4 w-4")}
25 | 		let:isChecked
26 | 		let:isIndeterminate
27 | 	>
28 | 		{#if isIndeterminate}
29 | 			<Minus class="h-4 w-4" />
30 | 		{:else}
31 | 			<Check class={cn("h-4 w-4", !isChecked && "text-transparent")} />
32 | 		{/if}
33 | 	</CheckboxPrimitive.Indicator>
34 | </CheckboxPrimitive.Root>
35 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/checkbox/index.ts:
--------------------------------------------------------------------------------
1 | import Root from "./checkbox.svelte";
2 | export {
3 | 	Root,
4 | 	//
5 | 	Root as Checkbox
6 | };
7 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/collapsible/collapsible-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
 3 | 	import { slide } from "svelte/transition";
 4 | 	type $$Props = CollapsiblePrimitive.ContentProps;
 5 | 
 6 | 	export let transition: $$Props["transition"] = slide;
 7 | 	export let transitionConfig: $$Props["transitionConfig"] = {
 8 | 		duration: 150
 9 | 	};
10 | </script>
11 | 
12 | <CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}>
13 | 	<slot />
14 | </CollapsiblePrimitive.Content>
15 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/collapsible/index.ts:
--------------------------------------------------------------------------------
 1 | import { Collapsible as CollapsiblePrimitive } from "bits-ui";
 2 | import Content from "./collapsible-content.svelte";
 3 | 
 4 | const Root = CollapsiblePrimitive.Root;
 5 | const Trigger = CollapsiblePrimitive.Trigger;
 6 | 
 7 | export {
 8 | 	Root,
 9 | 	Content,
10 | 	Trigger,
11 | 	//
12 | 	Root as Collapsible,
13 | 	Content as CollapsibleContent,
14 | 	Trigger as CollapsibleTrigger
15 | };
16 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import { Check } from "radix-icons-svelte";
 5 | 
 6 | 	type $$Props = ContextMenuPrimitive.CheckboxItemProps;
 7 | 	type $$Events = ContextMenuPrimitive.CheckboxItemEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export { className as class };
11 | 	export let checked: $$Props["checked"] = undefined;
12 | </script>
13 | 
14 | <ContextMenuPrimitive.CheckboxItem
15 | 	bind:checked
16 | 	class={cn(
17 | 		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
18 | 		className
19 | 	)}
20 | 	{...$$restProps}
21 | 	on:click
22 | 	on:keydown
23 | 	on:focusin
24 | 	on:focusout
25 | 	on:pointerdown
26 | 	on:pointerleave
27 | 	on:pointermove
28 | >
29 | 	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
30 | 		<ContextMenuPrimitive.CheckboxIndicator>
31 | 			<Check class="h-4 w-4" />
32 | 		</ContextMenuPrimitive.CheckboxIndicator>
33 | 	</span>
34 | 	<slot />
35 | </ContextMenuPrimitive.CheckboxItem>
36 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/context-menu/context-menu-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 3 | 	import { cn, flyAndScale } from "$lib/utils";
 4 | 
 5 | 	type $$Props = ContextMenuPrimitive.ContentProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let transition: $$Props["transition"] = flyAndScale;
 9 | 	export let transitionConfig: $$Props["transitionConfig"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <ContextMenuPrimitive.Content
14 | 	{transition}
15 | 	{transitionConfig}
16 | 	class={cn(
17 | 		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
18 | 		className
19 | 	)}
20 | 	{...$$restProps}
21 | 	on:keydown
22 | >
23 | 	<slot />
24 | </ContextMenuPrimitive.Content>
25 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/context-menu/context-menu-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = ContextMenuPrimitive.ItemProps & {
 6 | 		inset?: boolean;
 7 | 	};
 8 | 	type $$Events = ContextMenuPrimitive.ItemEvents;
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export let inset: $$Props["inset"] = undefined;
12 | 	export { className as class };
13 | </script>
14 | 
15 | <ContextMenuPrimitive.Item
16 | 	class={cn(
17 | 		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
18 | 		inset && "pl-8",
19 | 		className
20 | 	)}
21 | 	{...$$restProps}
22 | 	on:click
23 | 	on:keydown
24 | 	on:focusin
25 | 	on:focusout
26 | 	on:pointerdown
27 | 	on:pointerleave
28 | 	on:pointermove
29 | >
30 | 	<slot />
31 | </ContextMenuPrimitive.Item>
32 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/context-menu/context-menu-label.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = ContextMenuPrimitive.LabelProps & {
 6 | 		inset?: boolean;
 7 | 	};
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let inset: $$Props["inset"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <ContextMenuPrimitive.Label
15 | 	class={cn(
16 | 		"px-2 py-1.5 text-sm font-semibold text-foreground",
17 | 		inset && "pl-8",
18 | 		className
19 | 	)}
20 | 	{...$$restProps}
21 | >
22 | 	<slot />
23 | </ContextMenuPrimitive.Label>
24 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/context-menu/context-menu-radio-group.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 3 | 
 4 | 	type $$Props = ContextMenuPrimitive.RadioGroupProps;
 5 | 
 6 | 	export let value: $$Props["value"] = undefined;
 7 | </script>
 8 | 
 9 | <ContextMenuPrimitive.RadioGroup {...$$restProps} bind:value>
10 | 	<slot />
11 | </ContextMenuPrimitive.RadioGroup>
12 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/context-menu/context-menu-radio-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import { DotFilled } from "radix-icons-svelte";
 5 | 
 6 | 	type $$Props = ContextMenuPrimitive.RadioItemProps;
 7 | 	type $$Events = ContextMenuPrimitive.RadioItemEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let value: $$Props["value"];
11 | 	export { className as class };
12 | </script>
13 | 
14 | <ContextMenuPrimitive.RadioItem
15 | 	class={cn(
16 | 		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
17 | 		className
18 | 	)}
19 | 	{value}
20 | 	{...$$restProps}
21 | 	on:click
22 | 	on:keydown
23 | 	on:focusin
24 | 	on:focusout
25 | 	on:pointerdown
26 | 	on:pointerleave
27 | 	on:pointermove
28 | >
29 | 	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
30 | 		<ContextMenuPrimitive.RadioIndicator>
31 | 			<DotFilled class="h-4 w-4 fill-current" />
32 | 		</ContextMenuPrimitive.RadioIndicator>
33 | 	</span>
34 | 	<slot />
35 | </ContextMenuPrimitive.RadioItem>
36 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/context-menu/context-menu-separator.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = ContextMenuPrimitive.SeparatorProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <ContextMenuPrimitive.Separator
12 | 	class={cn("-mx-1 my-1 h-px bg-border", className)}
13 | 	{...$$restProps}
14 | />
15 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/context-menu/context-menu-shortcut.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <span
12 | 	class={cn(
13 | 		"ml-auto text-xs tracking-widest text-muted-foreground",
14 | 		className
15 | 	)}
16 | 	{...$$restProps}
17 | >
18 | 	<slot />
19 | </span>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/context-menu/context-menu-sub-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 3 | 	import { cn, flyAndScale } from "$lib/utils";
 4 | 
 5 | 	type $$Props = ContextMenuPrimitive.SubContentProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let transition: $$Props["transition"] = flyAndScale;
 9 | 	export let transitionConfig: $$Props["transitionConfig"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <ContextMenuPrimitive.SubContent
14 | 	{transition}
15 | 	{transitionConfig}
16 | 	class={cn(
17 | 		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
18 | 		className
19 | 	)}
20 | 	{...$$restProps}
21 | 	on:keydown
22 | 	on:focusout
23 | 	on:pointermove
24 | >
25 | 	<slot />
26 | </ContextMenuPrimitive.SubContent>
27 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import { ChevronRight } from "radix-icons-svelte";
 5 | 
 6 | 	type $$Props = ContextMenuPrimitive.SubTriggerProps & {
 7 | 		inset?: boolean;
 8 | 	};
 9 | 	type $$Events = ContextMenuPrimitive.SubTriggerEvents;
10 | 
11 | 	let className: $$Props["class"] = undefined;
12 | 	export let inset: $$Props["inset"] = undefined;
13 | 	export { className as class };
14 | </script>
15 | 
16 | <ContextMenuPrimitive.SubTrigger
17 | 	class={cn(
18 | 		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
19 | 		inset && "pl-8",
20 | 		className
21 | 	)}
22 | 	{...$$restProps}
23 | 	on:click
24 | 	on:keydown
25 | 	on:focusin
26 | 	on:focusout
27 | 	on:pointerleave
28 | 	on:pointermove
29 | >
30 | 	<slot />
31 | 	<ChevronRight class="ml-auto h-4 w-4" />
32 | </ContextMenuPrimitive.SubTrigger>
33 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/context-menu/index.ts:
--------------------------------------------------------------------------------
 1 | import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 2 | 
 3 | import Item from "./context-menu-item.svelte";
 4 | import Label from "./context-menu-label.svelte";
 5 | import Content from "./context-menu-content.svelte";
 6 | import Shortcut from "./context-menu-shortcut.svelte";
 7 | import RadioItem from "./context-menu-radio-item.svelte";
 8 | import Separator from "./context-menu-separator.svelte";
 9 | import RadioGroup from "./context-menu-radio-group.svelte";
10 | import SubContent from "./context-menu-sub-content.svelte";
11 | import SubTrigger from "./context-menu-sub-trigger.svelte";
12 | import CheckboxItem from "./context-menu-checkbox-item.svelte";
13 | 
14 | const Sub = ContextMenuPrimitive.Sub;
15 | const Root = ContextMenuPrimitive.Root;
16 | const Trigger = ContextMenuPrimitive.Trigger;
17 | const Group = ContextMenuPrimitive.Group;
18 | 
19 | export {
20 | 	Sub,
21 | 	Root,
22 | 	Item,
23 | 	Label,
24 | 	Group,
25 | 	Trigger,
26 | 	Content,
27 | 	Shortcut,
28 | 	Separator,
29 | 	RadioItem,
30 | 	SubContent,
31 | 	SubTrigger,
32 | 	RadioGroup,
33 | 	CheckboxItem,
34 | 	//
35 | 	Root as ContextMenu,
36 | 	Sub as ContextMenuSub,
37 | 	Item as ContextMenuItem,
38 | 	Label as ContextMenuLabel,
39 | 	Group as ContextMenuGroup,
40 | 	Content as ContextMenuContent,
41 | 	Trigger as ContextMenuTrigger,
42 | 	Shortcut as ContextMenuShortcut,
43 | 	RadioItem as ContextMenuRadioItem,
44 | 	Separator as ContextMenuSeparator,
45 | 	RadioGroup as ContextMenuRadioGroup,
46 | 	SubContent as ContextMenuSubContent,
47 | 	SubTrigger as ContextMenuSubTrigger,
48 | 	CheckboxItem as ContextMenuCheckboxItem
49 | };
50 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
 3 | 	import * as Dialog from ".";
 4 | 	import { cn, flyAndScale } from "$lib/utils";
 5 | 	import { Cross2 } from "radix-icons-svelte";
 6 | 
 7 | 	type $$Props = DialogPrimitive.ContentProps;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let transition: $$Props["transition"] = flyAndScale;
11 | 	export let transitionConfig: $$Props["transitionConfig"] = {
12 | 		duration: 200
13 | 	};
14 | 	export { className as class };
15 | </script>
16 | 
17 | <Dialog.Portal>
18 | 	<Dialog.Overlay />
19 | 	<DialogPrimitive.Content
20 | 		{transition}
21 | 		{transitionConfig}
22 | 		class={cn(
23 | 			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
24 | 			className
25 | 		)}
26 | 		{...$$restProps}
27 | 	>
28 | 		<slot />
29 | 		<DialogPrimitive.Close
30 | 			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
31 | 		>
32 | 			<Cross2 class="h-4 w-4" />
33 | 			<span class="sr-only">Close</span>
34 | 		</DialogPrimitive.Close>
35 | 	</DialogPrimitive.Content>
36 | </Dialog.Portal>
37 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-description.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = DialogPrimitive.DescriptionProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <DialogPrimitive.Description
12 | 	class={cn("text-sm text-muted-foreground", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </DialogPrimitive.Description>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-footer.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div
12 | 	class={cn(
13 | 		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
14 | 		className
15 | 	)}
16 | 	{...$$restProps}
17 | >
18 | 	<slot />
19 | </div>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div
12 | 	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-overlay.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import { fade } from "svelte/transition";
 5 | 
 6 | 	type $$Props = DialogPrimitive.OverlayProps;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export let transition: $$Props["transition"] = fade;
10 | 	export let transitionConfig: $$Props["transitionConfig"] = {
11 | 		duration: 150
12 | 	};
13 | 	export { className as class };
14 | </script>
15 | 
16 | <DialogPrimitive.Overlay
17 | 	{transition}
18 | 	{transitionConfig}
19 | 	class={cn(
20 | 		"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ",
21 | 		className
22 | 	)}
23 | 	{...$$restProps}
24 | />
25 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-portal.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
 3 | 
 4 | 	type $$Props = DialogPrimitive.PortalProps;
 5 | </script>
 6 | 
 7 | <DialogPrimitive.Portal {...$$restProps}>
 8 | 	<slot />
 9 | </DialogPrimitive.Portal>
10 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-title.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = DialogPrimitive.TitleProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <DialogPrimitive.Title
12 | 	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </DialogPrimitive.Title>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/index.ts:
--------------------------------------------------------------------------------
 1 | import { Dialog as DialogPrimitive } from "bits-ui";
 2 | 
 3 | const Root = DialogPrimitive.Root;
 4 | const Trigger = DialogPrimitive.Trigger;
 5 | 
 6 | import Title from "./dialog-title.svelte";
 7 | import Portal from "./dialog-portal.svelte";
 8 | import Footer from "./dialog-footer.svelte";
 9 | import Header from "./dialog-header.svelte";
10 | import Overlay from "./dialog-overlay.svelte";
11 | import Content from "./dialog-content.svelte";
12 | import Description from "./dialog-description.svelte";
13 | 
14 | export {
15 | 	Root,
16 | 	Title,
17 | 	Portal,
18 | 	Footer,
19 | 	Header,
20 | 	Trigger,
21 | 	Overlay,
22 | 	Content,
23 | 	Description,
24 | 	//
25 | 	Root as Dialog,
26 | 	Title as DialogTitle,
27 | 	Portal as DialogPortal,
28 | 	Footer as DialogFooter,
29 | 	Header as DialogHeader,
30 | 	Trigger as DialogTrigger,
31 | 	Overlay as DialogOverlay,
32 | 	Content as DialogContent,
33 | 	Description as DialogDescription
34 | };
35 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import { Check } from "radix-icons-svelte";
 5 | 
 6 | 	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
 7 | 	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let checked: $$Props["checked"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <DropdownMenuPrimitive.CheckboxItem
15 | 	bind:checked
16 | 	class={cn(
17 | 		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
18 | 		className
19 | 	)}
20 | 	{...$$restProps}
21 | 	on:click
22 | 	on:keydown
23 | 	on:focusin
24 | 	on:focusout
25 | 	on:pointerdown
26 | 	on:pointerleave
27 | 	on:pointermove
28 | >
29 | 	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
30 | 		<DropdownMenuPrimitive.CheckboxIndicator>
31 | 			<Check class="h-4 w-4" />
32 | 		</DropdownMenuPrimitive.CheckboxIndicator>
33 | 	</span>
34 | 	<slot />
35 | </DropdownMenuPrimitive.CheckboxItem>
36 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 3 | 	import { cn, flyAndScale } from "$lib/utils";
 4 | 
 5 | 	type $$Props = DropdownMenuPrimitive.ContentProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let transition: $$Props["transition"] = flyAndScale;
 9 | 	export let transitionConfig: $$Props["transitionConfig"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <DropdownMenuPrimitive.Content
14 | 	{transition}
15 | 	{transitionConfig}
16 | 	class={cn(
17 | 		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
18 | 		className
19 | 	)}
20 | 	{...$$restProps}
21 | 	on:keydown
22 | >
23 | 	<slot />
24 | </DropdownMenuPrimitive.Content>
25 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = DropdownMenuPrimitive.ItemProps & {
 6 | 		inset?: boolean;
 7 | 	};
 8 | 	type $$Events = DropdownMenuPrimitive.ItemEvents;
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export let inset: $$Props["inset"] = undefined;
12 | 	export { className as class };
13 | </script>
14 | 
15 | <DropdownMenuPrimitive.Item
16 | 	class={cn(
17 | 		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
18 | 		inset && "pl-8",
19 | 		className
20 | 	)}
21 | 	on:click
22 | 	on:keydown
23 | 	on:focusin
24 | 	on:focusout
25 | 	on:pointerdown
26 | 	on:pointerleave
27 | 	on:pointermove
28 | 	{...$$restProps}
29 | >
30 | 	<slot />
31 | </DropdownMenuPrimitive.Item>
32 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = DropdownMenuPrimitive.LabelProps & {
 6 | 		inset?: boolean;
 7 | 	};
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let inset: $$Props["inset"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <DropdownMenuPrimitive.Label
15 | 	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
16 | 	{...$$restProps}
17 | >
18 | 	<slot />
19 | </DropdownMenuPrimitive.Label>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 3 | 
 4 | 	type $$Props = DropdownMenuPrimitive.RadioGroupProps;
 5 | 
 6 | 	export let value: $$Props["value"] = undefined;
 7 | </script>
 8 | 
 9 | <DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
10 | 	<slot />
11 | </DropdownMenuPrimitive.RadioGroup>
12 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import { DotFilled } from "radix-icons-svelte";
 5 | 
 6 | 	type $$Props = DropdownMenuPrimitive.RadioItemProps;
 7 | 	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let value: DropdownMenuPrimitive.RadioItemProps["value"];
11 | 	export { className as class };
12 | </script>
13 | 
14 | <DropdownMenuPrimitive.RadioItem
15 | 	class={cn(
16 | 		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
17 | 		className
18 | 	)}
19 | 	{value}
20 | 	{...$$restProps}
21 | 	on:click
22 | 	on:keydown
23 | 	on:focusin
24 | 	on:focusout
25 | 	on:pointerdown
26 | 	on:pointerleave
27 | 	on:pointermove
28 | >
29 | 	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
30 | 		<DropdownMenuPrimitive.RadioIndicator>
31 | 			<DotFilled class="h-4 w-4 fill-current" />
32 | 		</DropdownMenuPrimitive.RadioIndicator>
33 | 	</span>
34 | 	<slot />
35 | </DropdownMenuPrimitive.RadioItem>
36 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = DropdownMenuPrimitive.SeparatorProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <DropdownMenuPrimitive.Separator
12 | 	class={cn("-mx-1 my-1 h-px bg-muted", className)}
13 | 	{...$$restProps}
14 | />
15 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <span
12 | 	class={cn("ml-auto text-xs tracking-widest opacity-60", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </span>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 3 | 	import { cn, flyAndScale } from "$lib/utils";
 4 | 
 5 | 	type $$Props = DropdownMenuPrimitive.SubContentProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let transition: $$Props["transition"] = flyAndScale;
 9 | 	export let transitionConfig: $$Props["transitionConfig"] = {
10 | 		x: -10,
11 | 		y: 0
12 | 	};
13 | 	export { className as class };
14 | </script>
15 | 
16 | <DropdownMenuPrimitive.SubContent
17 | 	{transition}
18 | 	{transitionConfig}
19 | 	class={cn(
20 | 		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
21 | 		className
22 | 	)}
23 | 	{...$$restProps}
24 | 	on:keydown
25 | 	on:focusout
26 | 	on:pointermove
27 | >
28 | 	<slot />
29 | </DropdownMenuPrimitive.SubContent>
30 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import { ChevronRight } from "radix-icons-svelte";
 5 | 
 6 | 	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
 7 | 		inset?: boolean;
 8 | 	};
 9 | 	type $$Events = DropdownMenuPrimitive.SubTriggerEvents;
10 | 
11 | 	let className: $$Props["class"] = undefined;
12 | 	export let inset: $$Props["inset"] = undefined;
13 | 	export { className as class };
14 | </script>
15 | 
16 | <DropdownMenuPrimitive.SubTrigger
17 | 	class={cn(
18 | 		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent",
19 | 		inset && "pl-8",
20 | 		className
21 | 	)}
22 | 	{...$$restProps}
23 | 	on:click
24 | 	on:keydown
25 | 	on:focusin
26 | 	on:focusout
27 | 	on:pointerleave
28 | 	on:pointermove
29 | >
30 | 	<slot />
31 | 	<ChevronRight class="ml-auto h-4 w-4" />
32 | </DropdownMenuPrimitive.SubTrigger>
33 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dropdown-menu/index.ts:
--------------------------------------------------------------------------------
 1 | import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 2 | import Item from "./dropdown-menu-item.svelte";
 3 | import Label from "./dropdown-menu-label.svelte";
 4 | import Content from "./dropdown-menu-content.svelte";
 5 | import Shortcut from "./dropdown-menu-shortcut.svelte";
 6 | import RadioItem from "./dropdown-menu-radio-item.svelte";
 7 | import Separator from "./dropdown-menu-separator.svelte";
 8 | import RadioGroup from "./dropdown-menu-radio-group.svelte";
 9 | import SubContent from "./dropdown-menu-sub-content.svelte";
10 | import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
11 | import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
12 | 
13 | const Sub = DropdownMenuPrimitive.Sub;
14 | const Root = DropdownMenuPrimitive.Root;
15 | const Trigger = DropdownMenuPrimitive.Trigger;
16 | const Group = DropdownMenuPrimitive.Group;
17 | 
18 | export {
19 | 	Sub,
20 | 	Root,
21 | 	Item,
22 | 	Label,
23 | 	Group,
24 | 	Trigger,
25 | 	Content,
26 | 	Shortcut,
27 | 	Separator,
28 | 	RadioItem,
29 | 	SubContent,
30 | 	SubTrigger,
31 | 	RadioGroup,
32 | 	CheckboxItem,
33 | 	//
34 | 	Root as DropdownMenu,
35 | 	Sub as DropdownMenuSub,
36 | 	Item as DropdownMenuItem,
37 | 	Label as DropdownMenuLabel,
38 | 	Group as DropdownMenuGroup,
39 | 	Content as DropdownMenuContent,
40 | 	Trigger as DropdownMenuTrigger,
41 | 	Shortcut as DropdownMenuShortcut,
42 | 	RadioItem as DropdownMenuRadioItem,
43 | 	Separator as DropdownMenuSeparator,
44 | 	RadioGroup as DropdownMenuRadioGroup,
45 | 	SubContent as DropdownMenuSubContent,
46 | 	SubTrigger as DropdownMenuSubTrigger,
47 | 	CheckboxItem as DropdownMenuCheckboxItem
48 | };
49 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-button.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import * as Button from "$lib/components/ui/button";
 3 | 	type $$Props = Button.Props;
 4 | 	type $$Events = Button.Events;
 5 | </script>
 6 | 
 7 | <Button.Root type="submit" {...$$restProps} on:click on:keydown>
 8 | 	<slot />
 9 | </Button.Root>
10 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-checkbox.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { getFormField } from "formsnap";
 3 | 	import type { Checkbox as CheckboxPrimitive } from "bits-ui";
 4 | 	import { Checkbox } from "$lib/components/ui/checkbox";
 5 | 	type $$Props = CheckboxPrimitive.Props;
 6 | 	type $$Events = CheckboxPrimitive.Events;
 7 | 
 8 | 	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
 9 | 
10 | 	const { name, setValue, attrStore, value } = getFormField();
11 | 	const { name: nameAttr, value: valueAttr, ...rest } = $attrStore;
12 | </script>
13 | 
14 | <Checkbox
15 | 	{...rest}
16 | 	checked={typeof $value === "boolean" ? $value : false}
17 | 	onCheckedChange={(v) => {
18 | 		onCheckedChange?.(v);
19 | 		setValue(v);
20 | 	}}
21 | 	{...$$restProps}
22 | 	on:click
23 | 	on:keydown
24 | />
25 | <input hidden {name} value={$value} />
26 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-description.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Form as FormPrimitive } from "formsnap";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import type { HTMLAttributes } from "svelte/elements";
 5 | 
 6 | 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 7 | 	let className: string | undefined | null = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <FormPrimitive.Description
12 | 	class={cn("text-[0.8rem] text-muted-foreground", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </FormPrimitive.Description>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-input.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { getFormField } from "formsnap";
 3 | 	import type { HTMLInputAttributes } from "svelte/elements";
 4 | 	import { Input, type InputEvents } from "$lib/components/ui/input";
 5 | 
 6 | 	type $$Props = HTMLInputAttributes;
 7 | 	type $$Events = InputEvents;
 8 | 
 9 | 	const { attrStore, value } = getFormField();
10 | </script>
11 | 
12 | <Input
13 | 	{...$attrStore}
14 | 	bind:value={$value}
15 | 	{...$$restProps}
16 | 	on:blur
17 | 	on:change
18 | 	on:click
19 | 	on:focus
20 | 	on:keydown
21 | 	on:keypress
22 | 	on:keyup
23 | 	on:mouseover
24 | 	on:mouseenter
25 | 	on:mouseleave
26 | 	on:paste
27 | 	on:input
28 | />
29 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 	let className: string | undefined | null = undefined;
 7 | 	export { className as class };
 8 | </script>
 9 | 
10 | <div class={cn("space-y-2", className)} {...$$restProps}>
11 | 	<slot />
12 | </div>
13 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-label.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { Label as LabelPrimitive } from "bits-ui";
 3 | 	import { getFormField } from "formsnap";
 4 | 	import { cn } from "$lib/utils";
 5 | 	import { Label } from "$lib/components/ui/label";
 6 | 
 7 | 	type $$Props = LabelPrimitive.Props;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export { className as class };
11 | 
12 | 	const { errors, ids } = getFormField();
13 | </script>
14 | 
15 | <Label
16 | 	for={ids.input}
17 | 	class={cn($errors && "text-destructive", className)}
18 | 	{...$$restProps}
19 | >
20 | 	<slot />
21 | </Label>
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-native-select.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Form as FormPrimitive } from "formsnap";
 3 | 	import { buttonVariants } from "$lib/components/ui/button";
 4 | 	import { cn } from "$lib/utils";
 5 | 	import { CaretSort } from "radix-icons-svelte";
 6 | 	import type { HTMLSelectAttributes } from "svelte/elements";
 7 | 
 8 | 	type $$Props = HTMLSelectAttributes;
 9 | 
10 | 	let className: string | undefined | null = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <FormPrimitive.Select
15 | 	class={cn(
16 | 		buttonVariants({ variant: "outline" }),
17 | 		"appearance-none bg-transparent font-normal",
18 | 		className
19 | 	)}
20 | 	{...$$restProps}
21 | >
22 | 	<slot />
23 | </FormPrimitive.Select>
24 | <CaretSort class="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
25 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-radio-group.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { getFormField } from "formsnap";
 3 | 	import type { RadioGroup as RadioGroupPrimitive } from "bits-ui";
 4 | 	import * as RadioGroup from "$lib/components/ui/radio-group";
 5 | 
 6 | 	type $$Props = RadioGroupPrimitive.Props;
 7 | 	const { attrStore, setValue, name, value } = getFormField();
 8 | 
 9 | 	export let onValueChange: $$Props["onValueChange"] = undefined;
10 | </script>
11 | 
12 | <RadioGroup.Root
13 | 	{...$attrStore}
14 | 	onValueChange={(v) => {
15 | 		onValueChange?.(v);
16 | 		setValue(v);
17 | 	}}
18 | 	{...$$restProps}
19 | >
20 | 	<slot />
21 | 	<input hidden {name} value={$value} />
22 | </RadioGroup.Root>
23 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-select-trigger.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import * as Select from "$lib/components/ui/select";
 3 | 	import type { Select as SelectPrimitive } from "bits-ui";
 4 | 	import { getFormField } from "formsnap";
 5 | 
 6 | 	type $$Props = SelectPrimitive.TriggerProps & {
 7 | 		placeholder?: string;
 8 | 	};
 9 | 	type $$Events = SelectPrimitive.TriggerEvents;
10 | 	const { attrStore } = getFormField();
11 | 	export let placeholder = "";
12 | </script>
13 | 
14 | <Select.Trigger {...$$restProps} {...$attrStore} on:click on:keydown>
15 | 	<Select.Value {placeholder} />
16 | 	<slot />
17 | </Select.Trigger>
18 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-select.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import * as Select from "$lib/components/ui/select";
 3 | 	import { getFormField } from "formsnap";
 4 | 	import type { Select as SelectPrimitive } from "bits-ui";
 5 | 
 6 | 	type $$Props = SelectPrimitive.Props;
 7 | 	const { setValue, name, value } = getFormField();
 8 | 	export let onSelectedChange: $$Props["onSelectedChange"];
 9 | </script>
10 | 
11 | <Select.Root
12 | 	onSelectedChange={(v) => {
13 | 		onSelectedChange?.(v);
14 | 		setValue(v ? v.value : undefined);
15 | 	}}
16 | 	{...$$restProps}
17 | >
18 | 	<slot />
19 | 	<input hidden {name} value={$value} />
20 | </Select.Root>
21 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-switch.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { getFormField } from "formsnap";
 3 | 	import type { Switch as SwitchPrimitive } from "bits-ui";
 4 | 	import { Switch } from "$lib/components/ui/switch";
 5 | 	type $$Props = SwitchPrimitive.Props;
 6 | 	type $$Events = SwitchPrimitive.Events;
 7 | 
 8 | 	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
 9 | 
10 | 	const { name, setValue, attrStore, value } = getFormField();
11 | </script>
12 | 
13 | <Switch
14 | 	{...$attrStore}
15 | 	checked={typeof $value === "boolean" ? $value : false}
16 | 	onCheckedChange={(v) => {
17 | 		onCheckedChange?.(v);
18 | 		setValue(v);
19 | 	}}
20 | 	{...$$restProps}
21 | 	on:click
22 | 	on:keydown
23 | />
24 | <input hidden {name} value={$value} />
25 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-textarea.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { getFormField } from "formsnap";
 3 | 	import type { HTMLTextareaAttributes } from "svelte/elements";
 4 | 	import type { TextareaGetFormField } from ".";
 5 | 	import {
 6 | 		Textarea,
 7 | 		type TextareaEvents
 8 | 	} from "$lib/components/ui/textarea";
 9 | 
10 | 	type $$Props = HTMLTextareaAttributes;
11 | 	type $$Events = TextareaEvents;
12 | 
13 | 	const { attrStore, value } = getFormField() as TextareaGetFormField;
14 | </script>
15 | 
16 | <Textarea
17 | 	{...$attrStore}
18 | 	bind:value={$value}
19 | 	{...$$restProps}
20 | 	on:blur
21 | 	on:change
22 | 	on:click
23 | 	on:focus
24 | 	on:keydown
25 | 	on:keypress
26 | 	on:keyup
27 | 	on:mouseover
28 | 	on:mouseenter
29 | 	on:mouseleave
30 | 	on:paste
31 | 	on:input
32 | />
33 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-validation.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Form as FormPrimitive } from "formsnap";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import type { HTMLAttributes } from "svelte/elements";
 5 | 
 6 | 	type $$Props = HTMLAttributes<HTMLParagraphElement>;
 7 | 	let className: string | undefined | null = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <FormPrimitive.Validation
12 | 	class={cn("text-[0.8rem] font-medium text-destructive", className)}
13 | 	{...$$restProps}
14 | />
15 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/hover-card/hover-card-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
 3 | 	import { cn, flyAndScale } from "$lib/utils";
 4 | 
 5 | 	type $$Props = HoverCardPrimitive.ContentProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let transition: $$Props["transition"] = flyAndScale;
 9 | 	export let transitionConfig: $$Props["transitionConfig"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <HoverCardPrimitive.Content
14 | 	{transition}
15 | 	{transitionConfig}
16 | 	class={cn(
17 | 		"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
18 | 		className
19 | 	)}
20 | 	{...$$restProps}
21 | >
22 | 	<slot />
23 | </HoverCardPrimitive.Content>
24 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/hover-card/index.ts:
--------------------------------------------------------------------------------
 1 | import { LinkPreview as HoverCardPrimitive } from "bits-ui";
 2 | 
 3 | import Content from "./hover-card-content.svelte";
 4 | const Root = HoverCardPrimitive.Root;
 5 | const Trigger = HoverCardPrimitive.Trigger;
 6 | 
 7 | export {
 8 | 	Root,
 9 | 	Content,
10 | 	Trigger,
11 | 	Root as HoverCard,
12 | 	Content as HoverCardContent,
13 | 	Trigger as HoverCardTrigger
14 | };
15 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/input/index.ts:
--------------------------------------------------------------------------------
 1 | import Root from "./input.svelte";
 2 | 
 3 | type FormInputEvent<T extends Event = Event> = T & {
 4 | 	currentTarget: EventTarget & HTMLInputElement;
 5 | };
 6 | export type InputEvents = {
 7 | 	blur: FormInputEvent<FocusEvent>;
 8 | 	change: FormInputEvent<Event>;
 9 | 	click: FormInputEvent<MouseEvent>;
10 | 	focus: FormInputEvent<FocusEvent>;
11 | 	keydown: FormInputEvent<KeyboardEvent>;
12 | 	keypress: FormInputEvent<KeyboardEvent>;
13 | 	keyup: FormInputEvent<KeyboardEvent>;
14 | 	mouseover: FormInputEvent<MouseEvent>;
15 | 	mouseenter: FormInputEvent<MouseEvent>;
16 | 	mouseleave: FormInputEvent<MouseEvent>;
17 | 	paste: FormInputEvent<ClipboardEvent>;
18 | 	input: FormInputEvent<InputEvent>;
19 | };
20 | 
21 | export {
22 | 	Root,
23 | 	//
24 | 	Root as Input
25 | };
26 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/input/input.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLInputAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import type { InputEvents } from ".";
 5 | 
 6 | 	type $$Props = HTMLInputAttributes;
 7 | 	type $$Events = InputEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let value: $$Props["value"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <input
15 | 	class={cn(
16 | 		"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
17 | 		className
18 | 	)}
19 | 	bind:value
20 | 	on:blur
21 | 	on:change
22 | 	on:click
23 | 	on:focus
24 | 	on:keydown
25 | 	on:keypress
26 | 	on:keyup
27 | 	on:mouseover
28 | 	on:mouseenter
29 | 	on:mouseleave
30 | 	on:paste
31 | 	on:input
32 | 	{...$$restProps}
33 | />
34 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/label/index.ts:
--------------------------------------------------------------------------------
1 | import Root from "./label.svelte";
2 | 
3 | export {
4 | 	Root,
5 | 	//
6 | 	Root as Label
7 | };
8 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/label/label.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Label as LabelPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = LabelPrimitive.Props;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <LabelPrimitive.Root
12 | 	class={cn(
13 | 		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
14 | 		className
15 | 	)}
16 | 	{...$$restProps}
17 | >
18 | 	<slot />
19 | </LabelPrimitive.Root>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/menubar/index.ts:
--------------------------------------------------------------------------------
 1 | import { Menubar as MenubarPrimitive } from "bits-ui";
 2 | 
 3 | import Root from "./menubar.svelte";
 4 | import CheckboxItem from "./menubar-checkbox-item.svelte";
 5 | import Content from "./menubar-content.svelte";
 6 | import Item from "./menubar-item.svelte";
 7 | import Label from "./menubar-label.svelte";
 8 | import RadioItem from "./menubar-radio-item.svelte";
 9 | import Separator from "./menubar-separator.svelte";
10 | import Shortcut from "./menubar-shortcut.svelte";
11 | import SubContent from "./menubar-sub-content.svelte";
12 | import SubTrigger from "./menubar-sub-trigger.svelte";
13 | import Trigger from "./menubar-trigger.svelte";
14 | 
15 | const Menu = MenubarPrimitive.Menu;
16 | const Group = MenubarPrimitive.Group;
17 | const Sub = MenubarPrimitive.Sub;
18 | const RadioGroup = MenubarPrimitive.RadioGroup;
19 | 
20 | export {
21 | 	Root,
22 | 	CheckboxItem,
23 | 	Content,
24 | 	Item,
25 | 	Label,
26 | 	RadioItem,
27 | 	Separator,
28 | 	Shortcut,
29 | 	SubContent,
30 | 	SubTrigger,
31 | 	Trigger,
32 | 	Menu,
33 | 	Group,
34 | 	Sub,
35 | 	RadioGroup,
36 | 	//
37 | 	Root as Menubar,
38 | 	CheckboxItem as MenubarCheckboxItem,
39 | 	Content as MenubarContent,
40 | 	Item as MenubarItem,
41 | 	Label as MenubarLabel,
42 | 	RadioItem as MenubarRadioItem,
43 | 	Separator as MenubarSeparator,
44 | 	Shortcut as MenubarShortcut,
45 | 	SubContent as MenubarSubContent,
46 | 	SubTrigger as MenubarSubTrigger,
47 | 	Trigger as MenubarTrigger,
48 | 	Menu as MenubarMenu,
49 | 	Group as MenubarGroup,
50 | 	Sub as MenubarSub,
51 | 	RadioGroup as MenubarRadioGroup
52 | };
53 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/menubar/menubar-checkbox-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Menubar as MenubarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import { Check } from "radix-icons-svelte";
 5 | 
 6 | 	type $$Props = MenubarPrimitive.CheckboxItemProps;
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | 	export let checked: $$Props["checked"] = undefined;
10 | </script>
11 | 
12 | <MenubarPrimitive.CheckboxItem
13 | 	bind:checked
14 | 	class={cn(
15 | 		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
16 | 		className
17 | 	)}
18 | 	{...$$restProps}
19 | 	on:click
20 | 	on:keydown
21 | 	on:focusin
22 | 	on:focusout
23 | 	on:pointerleave
24 | 	on:pointermove
25 | 	on:pointerdown
26 | >
27 | 	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
28 | 		<MenubarPrimitive.CheckboxIndicator>
29 | 			<Check class="h-4 w-4" />
30 | 		</MenubarPrimitive.CheckboxIndicator>
31 | 	</span>
32 | 	<slot />
33 | </MenubarPrimitive.CheckboxItem>
34 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/menubar/menubar-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Menubar as MenubarPrimitive } from "bits-ui";
 3 | 	import { cn, flyAndScale } from "$lib/utils";
 4 | 
 5 | 	type $$Props = MenubarPrimitive.ContentProps;
 6 | 	let className: $$Props["class"] = undefined;
 7 | 	export let transition: $$Props["transition"] = flyAndScale;
 8 | 	export let transitionConfig: $$Props["transitionConfig"] = undefined;
 9 | 	export { className as class };
10 | 	export let sideOffset = 4;
11 | </script>
12 | 
13 | <MenubarPrimitive.Content
14 | 	{transition}
15 | 	{transitionConfig}
16 | 	{sideOffset}
17 | 	class={cn(
18 | 		"z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
19 | 		className
20 | 	)}
21 | 	{...$$restProps}
22 | >
23 | 	<slot />
24 | </MenubarPrimitive.Content>
25 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/menubar/menubar-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Menubar as MenubarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = MenubarPrimitive.ItemProps & {
 6 | 		inset?: boolean;
 7 | 	};
 8 | 	type $$Events = MenubarPrimitive.ItemEvents;
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export let inset: $$Props["inset"] = undefined;
12 | 	export { className as class };
13 | </script>
14 | 
15 | <MenubarPrimitive.Item
16 | 	class={cn(
17 | 		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
18 | 		inset && "pl-8",
19 | 		className
20 | 	)}
21 | 	{...$$restProps}
22 | 	on:click
23 | 	on:keydown
24 | 	on:focusin
25 | 	on:focusout
26 | 	on:pointerleave
27 | 	on:pointermove
28 | 	on:pointerdown
29 | >
30 | 	<slot />
31 | </MenubarPrimitive.Item>
32 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/menubar/menubar-label.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Menubar as MenubarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = MenubarPrimitive.LabelProps & {
 6 | 		inset?: boolean;
 7 | 	};
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export let inset: $$Props["inset"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <MenubarPrimitive.Label
14 | 	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
15 | 	{...$$restProps}
16 | >
17 | 	<slot />
18 | </MenubarPrimitive.Label>
19 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/menubar/menubar-radio-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Menubar as MenubarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import { DotFilled } from "radix-icons-svelte";
 5 | 
 6 | 	type $$Props = MenubarPrimitive.RadioItemProps;
 7 | 	type $$Events = MenubarPrimitive.RadioItemEvents;
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export let value: $$Props["value"];
10 | 	export { className as class };
11 | </script>
12 | 
13 | <MenubarPrimitive.RadioItem
14 | 	{value}
15 | 	class={cn(
16 | 		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
17 | 		className
18 | 	)}
19 | 	{...$$restProps}
20 | 	on:click
21 | 	on:keydown
22 | 	on:focusin
23 | 	on:focusout
24 | 	on:pointerleave
25 | 	on:pointermove
26 | 	on:pointerdown
27 | >
28 | 	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
29 | 		<MenubarPrimitive.RadioIndicator>
30 | 			<DotFilled class="h-4 w-4 fill-current" />
31 | 		</MenubarPrimitive.RadioIndicator>
32 | 	</span>
33 | 	<slot />
34 | </MenubarPrimitive.RadioItem>
35 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/menubar/menubar-separator.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Menubar as MenubarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = MenubarPrimitive.SeparatorProps;
 6 | 	let className: $$Props["class"] = undefined;
 7 | 	export { className as class };
 8 | </script>
 9 | 
10 | <MenubarPrimitive.Separator
11 | 	class={cn("-mx-1 my-1 h-px bg-muted", className)}
12 | 	{...$$restProps}
13 | />
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/menubar/menubar-shortcut.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 6 | 	let className: $$Props["class"] = undefined;
 7 | 	export { className as class };
 8 | </script>
 9 | 
10 | <span
11 | 	class={cn(
12 | 		"ml-auto text-xs tracking-widest text-muted-foreground",
13 | 		className
14 | 	)}
15 | 	{...$$restProps}
16 | >
17 | 	<slot />
18 | </span>
19 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/menubar/menubar-sub-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Menubar as MenubarPrimitive } from "bits-ui";
 3 | 	import { cn, flyAndScale } from "$lib/utils";
 4 | 
 5 | 	type $$Props = MenubarPrimitive.SubContentProps;
 6 | 	let className: $$Props["class"] = undefined;
 7 | 	export let transition: $$Props["transition"] = flyAndScale;
 8 | 	export let transitionConfig: $$Props["transitionConfig"] = {
 9 | 		x: -10,
10 | 		y: 0
11 | 	};
12 | 	export { className as class };
13 | </script>
14 | 
15 | <MenubarPrimitive.SubContent
16 | 	{transition}
17 | 	{transitionConfig}
18 | 	class={cn(
19 | 		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
20 | 		className
21 | 	)}
22 | 	{...$$restProps}
23 | >
24 | 	<slot />
25 | </MenubarPrimitive.SubContent>
26 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/menubar/menubar-sub-trigger.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Menubar as MenubarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import { ChevronRight } from "radix-icons-svelte";
 5 | 
 6 | 	type $$Props = MenubarPrimitive.SubTriggerProps & {
 7 | 		inset?: boolean;
 8 | 	};
 9 | 	type $$Events = MenubarPrimitive.SubTriggerEvents;
10 | 
11 | 	let className: $$Props["class"] = undefined;
12 | 	export let inset: $$Props["inset"] = undefined;
13 | 	export { className as class };
14 | </script>
15 | 
16 | <MenubarPrimitive.SubTrigger
17 | 	class={cn(
18 | 		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
19 | 		inset && "pl-8",
20 | 		className
21 | 	)}
22 | 	{...$$restProps}
23 | 	on:click
24 | 	on:keydown
25 | 	on:focusin
26 | 	on:focusout
27 | 	on:pointerleave
28 | 	on:pointermove
29 | >
30 | 	<slot />
31 | 	<ChevronRight class="ml-auto h-4 w-4" />
32 | </MenubarPrimitive.SubTrigger>
33 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/menubar/menubar-trigger.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Menubar as MenubarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = MenubarPrimitive.TriggerProps;
 6 | 	type $$Events = MenubarPrimitive.TriggerEvents;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <MenubarPrimitive.Trigger
13 | 	class={cn(
14 | 		"flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
15 | 		className
16 | 	)}
17 | 	{...$$restProps}
18 | 	on:click
19 | 	on:keydown
20 | 	on:pointerenter
21 | >
22 | 	<slot />
23 | </MenubarPrimitive.Trigger>
24 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/menubar/menubar.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Menubar as MenubarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = MenubarPrimitive.Props;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <MenubarPrimitive.Root
12 | 	class={cn(
13 | 		"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
14 | 		className
15 | 	)}
16 | >
17 | 	<slot />
18 | </MenubarPrimitive.Root>
19 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/popover/index.ts:
--------------------------------------------------------------------------------
 1 | import { Popover as PopoverPrimitive } from "bits-ui";
 2 | import Content from "./popover-content.svelte";
 3 | const Root = PopoverPrimitive.Root;
 4 | const Trigger = PopoverPrimitive.Trigger;
 5 | 
 6 | export {
 7 | 	Root,
 8 | 	Content,
 9 | 	Trigger,
10 | 	//
11 | 	Root as Popover,
12 | 	Content as PopoverContent,
13 | 	Trigger as PopoverTrigger
14 | };
15 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/popover/popover-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Popover as PopoverPrimitive } from "bits-ui";
 3 | 	import { cn, flyAndScale } from "$lib/utils";
 4 | 
 5 | 	type $$Props = PopoverPrimitive.ContentProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let transition: $$Props["transition"] = flyAndScale;
 9 | 	export let transitionConfig: $$Props["transitionConfig"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <PopoverPrimitive.Content
14 | 	{transition}
15 | 	{transitionConfig}
16 | 	{...$$restProps}
17 | 	class={cn(
18 | 		"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
19 | 		className
20 | 	)}
21 | >
22 | 	<slot />
23 | </PopoverPrimitive.Content>
24 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/progress/index.ts:
--------------------------------------------------------------------------------
1 | import Root from "./progress.svelte";
2 | 
3 | export {
4 | 	Root,
5 | 	//
6 | 	Root as Progress
7 | };
8 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/progress/progress.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Progress as ProgressPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = ProgressPrimitive.Props;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let max: $$Props["max"] = 100;
 9 | 	export let value: $$Props["value"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <ProgressPrimitive.Root
14 | 	class={cn(
15 | 		"relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
16 | 		className
17 | 	)}
18 | 	{...$$restProps}
19 | >
20 | 	<div
21 | 		class="h-full w-full flex-1 bg-primary transition-all"
22 | 		style={`transform: translateX(-${
23 | 			100 - (100 * (value ?? 0)) / (max ?? 1)
24 | 		}%)`}
25 | 	/>
26 | </ProgressPrimitive.Root>
27 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/radio-group/index.ts:
--------------------------------------------------------------------------------
 1 | import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
 2 | 
 3 | import Root from "./radio-group.svelte";
 4 | import Item from "./radio-group-item.svelte";
 5 | const Input = RadioGroupPrimitive.Input;
 6 | 
 7 | export {
 8 | 	Root,
 9 | 	Input,
10 | 	Item,
11 | 	//
12 | 	Root as RadioGroup,
13 | 	Input as RadioGroupInput,
14 | 	Item as RadioGroupItem
15 | };
16 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/radio-group/radio-group-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
 3 | 	import { Check } from "radix-icons-svelte";
 4 | 	import { cn } from "$lib/utils";
 5 | 
 6 | 	type $$Props = RadioGroupPrimitive.ItemProps & {
 7 | 		value: string;
 8 | 	};
 9 | 	type $$Events = RadioGroupPrimitive.ItemEvents;
10 | 
11 | 	let className: $$Props["class"] = undefined;
12 | 	export let value: $$Props["value"];
13 | 	export { className as class };
14 | </script>
15 | 
16 | <RadioGroupPrimitive.Item
17 | 	{value}
18 | 	class={cn(
19 | 		"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
20 | 		className
21 | 	)}
22 | 	{...$$restProps}
23 | 	on:click
24 | >
25 | 	<div class="flex items-center justify-center">
26 | 		<RadioGroupPrimitive.ItemIndicator>
27 | 			<Check class="h-3.5 w-3.5 fill-primary" />
28 | 		</RadioGroupPrimitive.ItemIndicator>
29 | 	</div>
30 | </RadioGroupPrimitive.Item>
31 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/radio-group/radio-group.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = RadioGroupPrimitive.Props;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let value: $$Props["value"] = undefined;
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <RadioGroupPrimitive.Root
13 | 	bind:value
14 | 	class={cn("grid gap-2", className)}
15 | 	{...$$restProps}
16 | >
17 | 	<slot />
18 | </RadioGroupPrimitive.Root>
19 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/index.ts:
--------------------------------------------------------------------------------
 1 | import { Select as SelectPrimitive } from "bits-ui";
 2 | 
 3 | import Root from "./select.svelte";
 4 | import Label from "./select-label.svelte";
 5 | import Item from "./select-item.svelte";
 6 | import Content from "./select-content.svelte";
 7 | import Trigger from "./select-trigger.svelte";
 8 | import Separator from "./select-separator.svelte";
 9 | 
10 | const Group = SelectPrimitive.Group;
11 | const Input = SelectPrimitive.Input;
12 | const Value = SelectPrimitive.Value;
13 | 
14 | export {
15 | 	Root,
16 | 	Item,
17 | 	Group,
18 | 	Input,
19 | 	Label,
20 | 	Value,
21 | 	Content,
22 | 	Trigger,
23 | 	Separator,
24 | 	//
25 | 	Root as Select,
26 | 	Item as SelectItem,
27 | 	Group as SelectGroup,
28 | 	Input as SelectInput,
29 | 	Label as SelectLabel,
30 | 	Value as SelectValue,
31 | 	Content as SelectContent,
32 | 	Trigger as SelectTrigger,
33 | 	Separator as SelectSeparator
34 | };
35 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Select as SelectPrimitive } from "bits-ui";
 3 | 	import { cn, flyAndScale } from "$lib/utils";
 4 | 	import { scale } from "svelte/transition";
 5 | 
 6 | 	type $$Props = SelectPrimitive.ContentProps;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export let inTransition: $$Props["inTransition"] = flyAndScale;
10 | 	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
11 | 	export let outTransition: $$Props["outTransition"] = scale;
12 | 	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
13 | 		start: 0.95,
14 | 		opacity: 0,
15 | 		duration: 50
16 | 	};
17 | 	export { className as class };
18 | </script>
19 | 
20 | <SelectPrimitive.Content
21 | 	{inTransition}
22 | 	{inTransitionConfig}
23 | 	{outTransition}
24 | 	{outTransitionConfig}
25 | 	class={cn(
26 | 		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md focus:outline-none",
27 | 		className
28 | 	)}
29 | 	{...$$restProps}
30 | >
31 | 	<div class="w-full p-1">
32 | 		<slot />
33 | 	</div>
34 | </SelectPrimitive.Content>
35 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Select as SelectPrimitive } from "bits-ui";
 3 | 	import { Check } from "radix-icons-svelte";
 4 | 	import { cn } from "$lib/utils";
 5 | 
 6 | 	type $$Props = SelectPrimitive.ItemProps;
 7 | 	type $$Events = Required<SelectPrimitive.ItemEvents>;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let value: $$Props["value"];
11 | 	export let label: $$Props["label"] = undefined;
12 | 	export let disabled: $$Props["disabled"] = undefined;
13 | 	export { className as class };
14 | </script>
15 | 
16 | <SelectPrimitive.Item
17 | 	{value}
18 | 	{disabled}
19 | 	{label}
20 | 	class={cn(
21 | 		"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
22 | 		className
23 | 	)}
24 | 	{...$$restProps}
25 | 	on:click
26 | 	on:pointermove
27 | 	on:focusin
28 | >
29 | 	<span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
30 | 		<SelectPrimitive.ItemIndicator>
31 | 			<Check class="h-4 w-4" />
32 | 		</SelectPrimitive.ItemIndicator>
33 | 	</span>
34 | 	<slot />
35 | </SelectPrimitive.Item>
36 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-label.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Select as SelectPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = SelectPrimitive.LabelProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <SelectPrimitive.Label
12 | 	class={cn("px-2 py-1.5 text-sm font-semibold", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </SelectPrimitive.Label>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-separator.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Select as SelectPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = SelectPrimitive.SeparatorProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <SelectPrimitive.Separator
12 | 	class={cn("-mx-1 my-1 h-px bg-muted", className)}
13 | 	{...$$restProps}
14 | />
15 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-trigger.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Select as SelectPrimitive } from "bits-ui";
 3 | 	import { CaretSort } from "radix-icons-svelte";
 4 | 	import { cn } from "$lib/utils";
 5 | 
 6 | 	type $$Props = SelectPrimitive.TriggerProps;
 7 | 	type $$Events = SelectPrimitive.TriggerEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <SelectPrimitive.Trigger
14 | 	class={cn(
15 | 		"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
16 | 		className
17 | 	)}
18 | 	{...$$restProps}
19 | >
20 | 	<slot />
21 | 	<div>
22 | 		<CaretSort class="h-4 w-4 opacity-50" />
23 | 	</div>
24 | </SelectPrimitive.Trigger>
25 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Select as SelectPrimitive } from "bits-ui";
 3 | 
 4 | 	type $$Props = SelectPrimitive.Props;
 5 | 
 6 | 	export let selected: $$Props["selected"] = undefined;
 7 | 	export let open: $$Props["open"] = undefined;
 8 | </script>
 9 | 
10 | <SelectPrimitive.Root bind:selected bind:open {...$$restProps}>
11 | 	<slot />
12 | </SelectPrimitive.Root>
13 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/separator/index.ts:
--------------------------------------------------------------------------------
1 | import Root from "./separator.svelte";
2 | 
3 | export {
4 | 	Root,
5 | 	//
6 | 	Root as Separator
7 | };
8 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/separator/separator.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Separator as SeparatorPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = SeparatorPrimitive.Props;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let orientation: $$Props["orientation"] = "horizontal";
 9 | 	export let decorative: $$Props["decorative"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <SeparatorPrimitive.Root
14 | 	class={cn(
15 | 		"shrink-0 bg-border",
16 | 		orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
17 | 		className
18 | 	)}
19 | 	{orientation}
20 | 	{decorative}
21 | 	{...$$restProps}
22 | />
23 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/sheet/sheet-description.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as SheetPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = SheetPrimitive.DescriptionProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <SheetPrimitive.Description
12 | 	class={cn("text-sm text-muted-foreground", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </SheetPrimitive.Description>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/sheet/sheet-footer.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div
12 | 	class={cn(
13 | 		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
14 | 		className
15 | 	)}
16 | 	{...$$restProps}
17 | >
18 | 	<slot />
19 | </div>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/sheet/sheet-header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div
12 | 	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/sheet/sheet-overlay.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as SheetPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import { fade } from "svelte/transition";
 5 | 
 6 | 	type $$Props = SheetPrimitive.OverlayProps;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export { className as class };
10 | 	export let transition: $$Props["transition"] = fade;
11 | 	export let transitionConfig: $$Props["transitionConfig"] = {
12 | 		duration: 150
13 | 	};
14 | </script>
15 | 
16 | <SheetPrimitive.Overlay
17 | 	{transition}
18 | 	{transitionConfig}
19 | 	class={cn(
20 | 		"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm",
21 | 		className
22 | 	)}
23 | 	{...$$restProps}
24 | />
25 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/sheet/sheet-portal.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as SheetPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = SheetPrimitive.PortalProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <SheetPrimitive.Portal class={cn(className)} {...$$restProps}>
12 | 	<slot />
13 | </SheetPrimitive.Portal>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/sheet/sheet-title.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as SheetPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = SheetPrimitive.TitleProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <SheetPrimitive.Title
12 | 	class={cn("text-lg font-semibold text-foreground", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </SheetPrimitive.Title>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/skeleton/index.ts:
--------------------------------------------------------------------------------
1 | import Root from "./skeleton.svelte";
2 | 
3 | export {
4 | 	Root,
5 | 	//
6 | 	Root as Skeleton
7 | };
8 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/skeleton/skeleton.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div
12 | 	class={cn("animate-pulse rounded-md bg-primary/10", className)}
13 | 	{...$$restProps}
14 | />
15 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/slider/index.ts:
--------------------------------------------------------------------------------
1 | import Root from "./slider.svelte";
2 | 
3 | export {
4 | 	Root,
5 | 	//
6 | 	Root as Slider
7 | };
8 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/slider/slider.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Slider as SliderPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = SliderPrimitive.Props;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let value: $$Props["value"] = [0];
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <SliderPrimitive.Root
13 | 	bind:value
14 | 	class={cn(
15 | 		"relative flex w-full touch-none select-none items-center",
16 | 		className
17 | 	)}
18 | 	{...$$restProps}
19 | >
20 | 	<span
21 | 		class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20"
22 | 	>
23 | 		<SliderPrimitive.Range class="absolute h-full bg-primary" />
24 | 	</span>
25 | 	<SliderPrimitive.Thumb
26 | 		class="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
27 | 	/>
28 | </SliderPrimitive.Root>
29 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/switch/index.ts:
--------------------------------------------------------------------------------
1 | import Root from "./switch.svelte";
2 | 
3 | export {
4 | 	Root,
5 | 	//
6 | 	Root as Switch
7 | };
8 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/switch/switch.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Switch as SwitchPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = SwitchPrimitive.Props;
 6 | 	type $$Events = SwitchPrimitive.Events;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export let checked: $$Props["checked"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <SwitchPrimitive.Root
14 | 	bind:checked
15 | 	class={cn(
16 | 		"peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
17 | 		className
18 | 	)}
19 | 	{...$$restProps}
20 | 	on:click
21 | 	on:keydown
22 | >
23 | 	<SwitchPrimitive.Thumb
24 | 		class={cn(
25 | 			"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
26 | 		)}
27 | 	/>
28 | </SwitchPrimitive.Root>
29 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/index.ts:
--------------------------------------------------------------------------------
 1 | import Root from "./table.svelte";
 2 | import Body from "./table-body.svelte";
 3 | import Caption from "./table-caption.svelte";
 4 | import Cell from "./table-cell.svelte";
 5 | import Footer from "./table-footer.svelte";
 6 | import Head from "./table-head.svelte";
 7 | import Header from "./table-header.svelte";
 8 | import Row from "./table-row.svelte";
 9 | 
10 | export {
11 | 	Root,
12 | 	Body,
13 | 	Caption,
14 | 	Cell,
15 | 	Footer,
16 | 	Head,
17 | 	Header,
18 | 	Row,
19 | 	//
20 | 	Root as Table,
21 | 	Body as TableBody,
22 | 	Caption as TableCaption,
23 | 	Cell as TableCell,
24 | 	Footer as TableFooter,
25 | 	Head as TableHead,
26 | 	Header as TableHeader,
27 | 	Row as TableRow
28 | };
29 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-body.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <tbody class={cn("[&_tr:last-child]:border-0", className)} {...$$restProps}>
12 | 	<slot />
13 | </tbody>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-caption.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLTableCaptionElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <caption
12 | 	class={cn("mt-4 text-sm text-muted-foreground", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </caption>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-cell.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLTdAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLTdAttributes;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <td
12 | 	class={cn(
13 | 		"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
14 | 		className
15 | 	)}
16 | 	{...$$restProps}
17 | >
18 | 	<slot />
19 | </td>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-footer.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <tfoot
12 | 	class={cn("bg-primary font-medium text-primary-foreground", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </tfoot>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-head.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLThAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLThAttributes;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <th
12 | 	class={cn(
13 | 		"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
14 | 		className
15 | 	)}
16 | 	{...$$restProps}
17 | >
18 | 	<slot />
19 | </th>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <thead class={cn("[&_tr]:border-b", className)} {...$$restProps}>
12 | 	<slot />
13 | </thead>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-row.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLTableRowElement> & {
 6 | 		"data-state"?: unknown;
 7 | 	};
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <tr
14 | 	class={cn(
15 | 		"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
16 | 		className
17 | 	)}
18 | 	{...$$restProps}
19 | >
20 | 	<slot />
21 | </tr>
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { cn } from "$lib/utils";
 3 | 	import type { HTMLTableAttributes } from "svelte/elements";
 4 | 
 5 | 	type $$Props = HTMLTableAttributes;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div class="w-full overflow-auto">
12 | 	<table
13 | 		class={cn("w-full caption-bottom text-sm", className)}
14 | 		{...$$restProps}
15 | 	>
16 | 		<slot />
17 | 	</table>
18 | </div>
19 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/tabs/index.ts:
--------------------------------------------------------------------------------
 1 | import { Tabs as TabsPrimitive } from "bits-ui";
 2 | import Content from "./tabs-content.svelte";
 3 | import List from "./tabs-list.svelte";
 4 | import Trigger from "./tabs-trigger.svelte";
 5 | 
 6 | const Root = TabsPrimitive.Root;
 7 | 
 8 | export {
 9 | 	Root,
10 | 	Content,
11 | 	List,
12 | 	Trigger,
13 | 	//
14 | 	Root as Tabs,
15 | 	Content as TabsContent,
16 | 	List as TabsList,
17 | 	Trigger as TabsTrigger
18 | };
19 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/tabs/tabs-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Tabs as TabsPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = TabsPrimitive.ContentProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let value: $$Props["value"];
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <TabsPrimitive.Content
13 | 	class={cn(
14 | 		"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
15 | 		className
16 | 	)}
17 | 	{value}
18 | 	{...$$restProps}
19 | >
20 | 	<slot />
21 | </TabsPrimitive.Content>
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/tabs/tabs-list.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Tabs as TabsPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = TabsPrimitive.ListProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <TabsPrimitive.List
12 | 	class={cn(
13 | 		"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
14 | 		className
15 | 	)}
16 | 	{...$$restProps}
17 | >
18 | 	<slot />
19 | </TabsPrimitive.List>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/tabs/tabs-trigger.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Tabs as TabsPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils";
 4 | 
 5 | 	type $$Props = TabsPrimitive.TriggerProps;
 6 | 	type $$Events = TabsPrimitive.TriggerEvents;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export let value: $$Props["value"];
10 | 	export { className as class };
11 | </script>
12 | 
13 | <TabsPrimitive.Trigger
14 | 	class={cn(
15 | 		"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
16 | 		className
17 | 	)}
18 | 	{value}
19 | 	{...$$restProps}
20 | 	on:click
21 | 	on:keydown
22 | 	on:focus
23 | >
24 | 	<slot />
25 | </TabsPrimitive.Trigger>
26 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/textarea/index.ts:
--------------------------------------------------------------------------------
 1 | import Root from "./textarea.svelte";
 2 | 
 3 | type FormTextareaEvent<T extends Event = Event> = T & {
 4 | 	currentTarget: EventTarget & HTMLTextAreaElement;
 5 | };
 6 | 
 7 | type TextareaEvents = {
 8 | 	blur: FormTextareaEvent<FocusEvent>;
 9 | 	change: FormTextareaEvent<Event>;
10 | 	click: FormTextareaEvent<MouseEvent>;
11 | 	focus: FormTextareaEvent<FocusEvent>;
12 | 	keydown: FormTextareaEvent<KeyboardEvent>;
13 | 	keypress: FormTextareaEvent<KeyboardEvent>;
14 | 	keyup: FormTextareaEvent<KeyboardEvent>;
15 | 	mouseover: FormTextareaEvent<MouseEvent>;
16 | 	mouseenter: FormTextareaEvent<MouseEvent>;
17 | 	mouseleave: FormTextareaEvent<MouseEvent>;
18 | 	paste: FormTextareaEvent<ClipboardEvent>;
19 | 	input: FormTextareaEvent<InputEvent>;
20 | };
21 | 
22 | export {
23 | 	Root,
24 | 	//
25 | 	Root as Textarea,
26 | 	type TextareaEvents,
27 | 	type FormTextareaEvent
28 | };
29 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/textarea/textarea.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLTextareaAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils";
 4 | 	import type { TextareaEvents } from ".";
 5 | 
 6 | 	type $$Props = HTMLTextareaAttributes;
 7 | 	type $$Events = TextareaEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let value: $$Props["value"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <textarea
15 | 	class={cn(
16 | 		"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
17 | 		className
18 | 	)}
19 | 	bind:value
20 | 	on:blur
21 | 	on:change
22 | 	on:click
23 | 	on:focus
24 | 	on:keydown
25 | 	on:keypress
26 | 	on:keyup
27 | 	on:mouseover
28 | 	on:mouseenter
29 | 	on:mouseleave
30 | 	on:paste
31 | 	on:input
32 | 	{...$$restProps}
33 | />
34 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/toggle/index.ts:
--------------------------------------------------------------------------------
 1 | import Root from "./toggle.svelte";
 2 | import { tv, type VariantProps } from "tailwind-variants";
 3 | 
 4 | export const toggleVariants = tv({
 5 | 	base: "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
 6 | 	variants: {
 7 | 		variant: {
 8 | 			default: "bg-transparent",
 9 | 			outline:
10 | 				"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground"
11 | 		},
12 | 		size: {
13 | 			default: "h-9 px-3",
14 | 			sm: "h-8 px-2",
15 | 			lg: "h-10 px-3"
16 | 		}
17 | 	},
18 | 	defaultVariants: {
19 | 		variant: "default",
20 | 		size: "default"
21 | 	}
22 | });
23 | 
24 | export type Variant = VariantProps<typeof toggleVariants>["variant"];
25 | export type Size = VariantProps<typeof toggleVariants>["size"];
26 | 
27 | export {
28 | 	Root,
29 | 	//
30 | 	Root as Toggle
31 | };
32 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/toggle/toggle.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Toggle as TogglePrimitive } from "bits-ui";
 3 | 	import { toggleVariants, type Variant, type Size } from ".";
 4 | 	import { cn } from "$lib/utils";
 5 | 
 6 | 	type $$Props = TogglePrimitive.Props & {
 7 | 		variant?: Variant;
 8 | 		size?: Size;
 9 | 	};
10 | 	type $$Events = TogglePrimitive.Events;
11 | 
12 | 	let className: $$Props["class"] = undefined;
13 | 	export let variant: $$Props["variant"] = "default";
14 | 	export let size: $$Props["size"] = "default";
15 | 	export let pressed: $$Props["pressed"] = undefined;
16 | 	export { className as class };
17 | </script>
18 | 
19 | <TogglePrimitive.Root
20 | 	bind:pressed
21 | 	class={cn(toggleVariants({ variant, size, className }))}
22 | 	{...$$restProps}
23 | 	on:click
24 | 	on:keydown
25 | >
26 | 	<slot />
27 | </TogglePrimitive.Root>
28 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/tooltip/index.ts:
--------------------------------------------------------------------------------
 1 | import { Tooltip as TooltipPrimitive } from "bits-ui";
 2 | import Content from "./tooltip-content.svelte";
 3 | 
 4 | const Root = TooltipPrimitive.Root;
 5 | const Trigger = TooltipPrimitive.Trigger;
 6 | 
 7 | export {
 8 | 	Root,
 9 | 	Trigger,
10 | 	Content,
11 | 	//
12 | 	Root as Tooltip,
13 | 	Content as TooltipContent,
14 | 	Trigger as TooltipTrigger
15 | };
16 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/tooltip/tooltip-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Tooltip as TooltipPrimitive } from "bits-ui";
 3 | 	import { cn, flyAndScale } from "$lib/utils";
 4 | 
 5 | 	type $$Props = TooltipPrimitive.ContentProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let sideOffset: $$Props["sideOffset"] = 4;
 9 | 	export let transition: $$Props["transition"] = flyAndScale;
10 | 	export let transitionConfig: $$Props["transitionConfig"] = {
11 | 		y: 8,
12 | 		duration: 150
13 | 	};
14 | 	export { className as class };
15 | </script>
16 | 
17 | <TooltipPrimitive.Content
18 | 	{sideOffset}
19 | 	{transition}
20 | 	{transitionConfig}
21 | 	class={cn(
22 | 		"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground",
23 | 		className
24 | 	)}
25 | 	{...$$restProps}
26 | >
27 | 	<slot />
28 | </TooltipPrimitive.Content>
29 | 


--------------------------------------------------------------------------------
/src/lib/components/user-avatar.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import type { User } from "@auth/core/types";
 3 |   import { Icons } from "$components/icons";
 4 |   import { Avatar, AvatarFallback, AvatarImage } from "$components/ui/avatar";
 5 | 
 6 |   const getInitialsFromName = (name?: string | null): string | undefined => {
 7 |     if (!name || !name.trim()) {
 8 |       return undefined;
 9 |     }
10 | 
11 |     const splitName = name.trim().split(" ");
12 | 
13 |     if (splitName.length > 1) {
14 |       return `${splitName[0]?.charAt(0) || ""}${splitName[1]?.charAt(0) || ""}`;
15 |     }
16 | 
17 |     return splitName[0]?.slice(0, 2) || "";
18 |   };
19 |   export let user: User;
20 |   $: initials = getInitialsFromName(user.name);
21 | </script>
22 | 
23 | <Avatar class="h-8 w-8">
24 |   <AvatarImage src={user.image ?? undefined} alt={user.email ?? ""} />
25 |   <AvatarFallback>
26 |     {#if initials}
27 |       {initials}
28 |     {:else if user.email}
29 |       {user.email?.slice(0, 1)}
30 |     {:else}
31 |       <Icons.user></Icons.user>
32 |     {/if}
33 |   </AvatarFallback>
34 | </Avatar>
35 | 


--------------------------------------------------------------------------------
/src/lib/config/dashboard.ts:
--------------------------------------------------------------------------------
 1 | import type { SidebarNavItem } from "@/lib/types";
 2 | 
 3 | export type DashboardConfig = {
 4 |   sidebarNav: SidebarNavItem[];
 5 | };
 6 | 
 7 | export const dashboardConfig: DashboardConfig = {
 8 |   sidebarNav: [
 9 |     {
10 |       title: "Account",
11 |       href: "/dashboard/account",
12 |       icon: "user",
13 |       items: [],
14 |     },
15 |   ],
16 | };
17 | 


--------------------------------------------------------------------------------
/src/lib/config/nav.ts:
--------------------------------------------------------------------------------
 1 | import type { NavItem, SidebarNavItem } from "$lib/types/nav";
 2 | 
 3 | interface DocsConfig {
 4 |   mainNav: NavItem[];
 5 |   sidebarNav: SidebarNavItem[];
 6 | }
 7 | 
 8 | type Example = {
 9 |   name: string;
10 |   href: string;
11 |   label?: string;
12 |   code: string;
13 | };
14 | export const examples: Example[] = [
15 |   {
16 |     name: "Dashboard",
17 |     href: "/examples/dashboard",
18 |     code: "https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/docs/dashboard",
19 |   },
20 |   {
21 |     name: "Cards",
22 |     href: "/examples/cards",
23 |     code: "https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/routes/examples/cards",
24 |   },
25 |   // {
26 |   // 	name: "Tasks",
27 |   // 	href: "/examples/tasks",
28 |   // 	label: "New",
29 |   // 	code: "https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/apps/www/app/examples/tasks"
30 |   // },
31 |   {
32 |     name: "Playground",
33 |     href: "/examples/playground",
34 |     code: "https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/routes/examples/playground",
35 |   },
36 |   {
37 |     name: "Music",
38 |     href: "/examples/music",
39 |     code: "https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/routes/examples/music",
40 |   },
41 |   {
42 |     name: "Authentication",
43 |     href: "/examples/authentication",
44 |     code: "https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/routes/examples/authentication",
45 |   },
46 |   {
47 |     name: "Forms",
48 |     href: "/examples/forms",
49 |     code: "https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/routes/examples/forms",
50 |   },
51 | ];
52 | 


--------------------------------------------------------------------------------
/src/lib/constants.ts:
--------------------------------------------------------------------------------
1 | export const CONSTANTS = {
2 |   authedRoutes: ["/dashboard", "/chat", "/auth/sign-out"],
3 |   notAuthedRoutes: ["/auth/sign-in", "/auth/sign-up", "/auth/verify-request"],
4 | };
5 | 


--------------------------------------------------------------------------------
/src/lib/images/svelte-welcome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/juliuslipp/sveltekit-shadcn-ai/07d1ff53476e335cf06e66892fc6d4d41f4b230e/src/lib/images/svelte-welcome.png


--------------------------------------------------------------------------------
/src/lib/images/svelte-welcome.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/juliuslipp/sveltekit-shadcn-ai/07d1ff53476e335cf06e66892fc6d4d41f4b230e/src/lib/images/svelte-welcome.webp


--------------------------------------------------------------------------------
/src/lib/schemas/account-schema.ts:
--------------------------------------------------------------------------------
 1 | import { z } from "zod";
 2 | 
 3 | export const accountFormSchema = z.object({
 4 |   name: z
 5 |     .string({
 6 |       required_error: "Required.",
 7 |     })
 8 |     .min(2, "Name must be at least 2 characters.")
 9 |     .max(30, "Name must not be longer than 30 characters"),
10 | });
11 | 
12 | export type AccountFormSchema = typeof accountFormSchema;
13 | 


--------------------------------------------------------------------------------
/src/lib/schemas/contact-schema.ts:
--------------------------------------------------------------------------------
 1 | import * as z from "zod";
 2 | 
 3 | export const contactUsSchema = z.object({
 4 |   email: z.string().email(),
 5 |   firstName: z.string().optional(),
 6 |   lastName: z.string().optional(),
 7 |   company: z.string().optional(),
 8 |   message: z.string().min(5).max(1000),
 9 | });
10 | 
11 | export type ContactUsFormSchema = z.infer<typeof contactUsSchema>;
12 | 


--------------------------------------------------------------------------------
/src/lib/stores/breakpoint-store.ts:
--------------------------------------------------------------------------------
 1 | import { mediaQuery } from "svelte-legos";
 2 | import { derived } from "svelte/store";
 3 | 
 4 | const breakpoints = {
 5 |   sm: "640px",
 6 |   md: "768px",
 7 |   lg: "1024px",
 8 |   xl: "1280px",
 9 |   "2xl": "1400px",
10 | };
11 | 
12 | const individualBreakpoints = Object.keys(breakpoints).map((breakpointKey) => {
13 |   return mediaQuery(`(min-width: ${breakpoints[breakpointKey]})`);
14 | });
15 | export const breakpointsStore = derived(
16 |   individualBreakpoints,
17 |   ($individualBreakpoints) => {
18 |     return Object.keys(breakpoints).reduce((acc, breakpointKey, index) => {
19 |       const name = `is${breakpointKey[0].toUpperCase()}${breakpointKey.substring(
20 |         1
21 |       )}`;
22 |       acc[name] = $individualBreakpoints[index];
23 |       return acc;
24 |     }, {});
25 |   }
26 | );
27 | 


--------------------------------------------------------------------------------
/src/lib/stores/cookies-store.ts:
--------------------------------------------------------------------------------
 1 | import { storage } from "svelte-legos";
 2 | import { writable } from "svelte/store";
 3 | 
 4 | export const cookiesStore = storage(
 5 |   writable({
 6 |     analytics: false,
 7 |     marketing: false,
 8 |     saved: true,
 9 |   }),
10 |   "cookie-preferences"
11 | );
12 | 


--------------------------------------------------------------------------------
/src/lib/types/auth-js.d.ts:
--------------------------------------------------------------------------------
 1 | import type { DefaultSession, User } from "@auth/core/types";
 2 | import { users } from "$server/db/schema";
 3 | import { InferSelectModel } from "drizzle-orm";
 4 | 
 5 | declare module "@auth/core/types" {
 6 |   interface Session extends DefaultSession {
 7 |     user: {
 8 |       id: string;
 9 |       name: string;
10 |     } & DefaultSession["user"];
11 |   }
12 | 
13 |   // interface User {
14 |   //   // ...other properties
15 |   //   // role: UserRole;
16 |   // }
17 | }
18 | 
19 | declare module "@auth/drizzle-adapter" {
20 |   interface AdapterUser extends User, InferSelectModel<typeof users> {}
21 | }
22 | 


--------------------------------------------------------------------------------
/src/lib/types/db.ts:
--------------------------------------------------------------------------------
1 | import { type chats } from "$server/db/schema";
2 | import { type InferInsertModel, type InferSelectModel } from "drizzle-orm";
3 | 
4 | export type Chat = InferSelectModel<typeof chats>;
5 | export type InsertChat = InferInsertModel<typeof chats>;
6 | 


--------------------------------------------------------------------------------
/src/lib/types/nav.ts:
--------------------------------------------------------------------------------
 1 | import type { Icons } from "$components/icons";
 2 | 
 3 | export type NavItem = {
 4 |   title: string;
 5 |   href?: string;
 6 |   disabled?: boolean;
 7 |   external?: boolean;
 8 |   icon?: keyof typeof Icons;
 9 |   label?: string;
10 | };
11 | 
12 | export type SidebarNavItem = NavItem & {
13 |   items: SidebarNavItem[];
14 | };
15 | 
16 | export type NavItemWithChildren = NavItem & {
17 |   items: NavItemWithChildren[];
18 | };
19 | 
20 | export type NavItemWithOptionalChildren = NavItem | NavItemWithChildren;
21 | 
22 | export interface FooterItem {
23 |   title: string;
24 |   items: (
25 |     | {
26 |         title: string;
27 |         href: string;
28 |         external?: false;
29 |       }
30 |     | {
31 |         title: string;
32 |         href: string;
33 |         external: true;
34 |       }
35 |   )[];
36 | }
37 | 


--------------------------------------------------------------------------------
/src/lib/types/types.d.ts:
--------------------------------------------------------------------------------
 1 | import type { ComponentType } from "svelte";
 2 | import type { ExternalToast } from "svelte-sonner/dist/types";
 3 | 
 4 | declare module "svelte-sonner/dist/types" {
 5 |   type PromiseDataOR<ToastData = unknown> = ExternalToast & {
 6 |     loading?: string | ComponentType;
 7 |     success?:
 8 |       | string
 9 |       | ComponentType
10 |       | ((data: ToastData) => ComponentType | string);
11 |     info?:
12 |       | string
13 |       | ComponentType
14 |       | ((data: ToastData) => ComponentType | string);
15 |     warning?:
16 |       | string
17 |       | ComponentType
18 |       | ((data: ToastData) => ComponentType | string);
19 |     error?:
20 |       | string
21 |       | ComponentType
22 |       | ((error: unknown) => ComponentType | string);
23 |   };
24 | }
25 | 


--------------------------------------------------------------------------------
/src/routes/(app)/(marketing)/+error.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import ErrorCard from "$components/error-card.svelte";
 3 |   import { Container, Shell } from "$components/layout";
 4 | </script>
 5 | 
 6 | <Shell variant="fullScreen">
 7 |   <Container variant="centered">
 8 |     <ErrorCard
 9 |       icon="warning"
10 |       title="Page not found"
11 |       description="The page you are looking for does not exist"
12 |       retryLink="/"
13 |       retryLinkText="Go to Home"
14 |     />
15 |   </Container>
16 | </Shell>
17 | 


--------------------------------------------------------------------------------
/src/routes/(app)/(marketing)/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { page } from "$app/stores";
 3 |   import { SiteFooter, SiteHeader } from "$components/layout";
 4 |   import { breakpointsStore } from "$lib/stores/breakpoint-store";
 5 | 
 6 |   $: reactiveMenu = $page.url.pathname === "/" && $breakpointsStore.isMd;
 7 | </script>
 8 | 
 9 | <div class="bg-background min-h-full w-full flex flex-col">
10 |   <SiteHeader {reactiveMenu}></SiteHeader>
11 | 
12 |   <main class="flex-1 w-full">
13 |     <slot />
14 |   </main>
15 | 
16 |   <SiteFooter></SiteFooter>
17 | </div>
18 | 


--------------------------------------------------------------------------------
/src/routes/(app)/(marketing)/+page.server.ts:
--------------------------------------------------------------------------------
1 | export const prerender = true;
2 | 


--------------------------------------------------------------------------------
/src/routes/(app)/(marketing)/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { Container, Shell } from "$lib/components/layout";
 3 |   import { Card } from "$lib/components/ui/card";
 4 | </script>
 5 | 
 6 | <svelte:head>
 7 |   <title>Home</title>
 8 |   <meta name="description" content="Svelte demo app" />
 9 | </svelte:head>
10 | 
11 | <Shell variant="fullScreen" class="relative">
12 |   <Container variant="centered" class="relative text-center">
13 |     <Card class="p-4 drop-shadow-2xl backdrop-filter shadow-orange-600/50">
14 |       <h1 class="text-4xl text-primary pb-4 font-bold">svelte-app-starter</h1>
15 |       <p class="text-primary">The ultimate sveltekit start-up starter</p>
16 |     </Card>
17 |   </Container>
18 | </Shell>
19 | 
20 | <Shell variant="page" class="py-0 md:py-0">
21 |   <Container variant="contrast"><div>Marketing 1</div></Container>
22 |   <Container variant=""><div>Marketing 2</div></Container>
23 | </Shell>
24 | 


--------------------------------------------------------------------------------
/src/routes/(app)/(marketing)/[slug]/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { page } from "$app/stores";
 3 |   import { Heading, Shell } from "$components/layout";
 4 |   import { Separator } from "$components/ui/separator";
 5 | 
 6 |   const {
 7 |     component,
 8 |     metadata: { description, title },
 9 |   } = $page.data;
10 | </script>
11 | 
12 | <Shell variant="markdown" as="section">
13 |   <Heading {description} {title} />
14 |   <Separator />
15 |   <svelte:component this={component} />
16 | </Shell>
17 | 


--------------------------------------------------------------------------------
/src/routes/(app)/(marketing)/[slug]/+page.ts:
--------------------------------------------------------------------------------
 1 | import { error } from "@sveltejs/kit";
 2 | import { pathToSlug } from "$lib/utils";
 3 | import type { SvelteComponent } from "svelte";
 4 | 
 5 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 6 | // @ts-ignore
 7 | const modules = import.meta.glob(`../../../../content/pages/*.svelte.md`);
 8 | 
 9 | export const prerender = true;
10 | 
11 | interface SitePage {
12 |   default: SvelteComponent;
13 |   metadata: {
14 |     title: string;
15 |     description: string;
16 |   };
17 | }
18 | 
19 | const mappedModules = Promise.all(
20 |   Object.entries(modules).map(
21 |     async ([path, importModule]: [string, () => Promise<SitePage>]) => {
22 |       const module = await importModule();
23 |       return {
24 |         slug: pathToSlug(path),
25 |         metadata: module.metadata,
26 |         component: module.default,
27 |       };
28 |     }
29 |   )
30 | );
31 | export async function load(event) {
32 |   const module = (await mappedModules).find(
33 |     (module) => module.slug === event.params.slug
34 |   );
35 |   if (!module) {
36 |     throw error(404);
37 |   }
38 | 
39 |   return module;
40 | }
41 | 
42 | export async function entries() {
43 |   const modules = await mappedModules;
44 |   return modules.map((module) => ({
45 |     slug: module.slug,
46 |   }));
47 | }
48 | 


--------------------------------------------------------------------------------
/src/routes/(app)/(marketing)/blog/+page.server.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/juliuslipp/sveltekit-shadcn-ai/07d1ff53476e335cf06e66892fc6d4d41f4b230e/src/routes/(app)/(marketing)/blog/+page.server.ts


--------------------------------------------------------------------------------
/src/routes/(app)/(marketing)/blog/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { Container, Shell } from "$lib/components/layout";
 3 |   import { Card } from "$lib/components/ui/card";
 4 | </script>
 5 | 
 6 | <svelte:head>
 7 |   <title>Home</title>
 8 |   <meta name="description" content="Svelte demo app" />
 9 | </svelte:head>
10 | 
11 | <Shell variant="fullScreen">
12 |   <Container variant="centered" class="relative text-center">
13 |     <Card class="p-4 shadow-2xl shadow-orange-600/50">
14 |       <h1 class="text-4xl text-primary pb-4 font-bold">svelte-app-starter</h1>
15 |       <p class="text-primary">The ultimate sveltekit start-up starter</p>
16 |     </Card>
17 |   </Container>
18 | </Shell>
19 | 
20 | <Shell variant="page">
21 |   <Container variant="contrast"><div>Marketing 1</div></Container>
22 |   <Container variant=""><div>Marketing 2</div></Container>
23 | </Shell>
24 | 


--------------------------------------------------------------------------------
/src/routes/(app)/(marketing)/contact/+page.server.ts:
--------------------------------------------------------------------------------
 1 | import { fail, type Actions } from "@sveltejs/kit";
 2 | import { siteConfig } from "$lib/config/site";
 3 | import { contactUsSchema } from "$lib/schemas/contact-schema";
 4 | import { sendEmail } from "$server/email";
 5 | import { superValidate } from "sveltekit-superforms/server";
 6 | 
 7 | import type { PageServerLoad } from "./$types";
 8 | 
 9 | export const load: PageServerLoad = async (event) => {
10 |   const user = event.locals.session?.user;
11 |   const userName = user?.name?.split(" ");
12 | 
13 |   if (user) {
14 |     return {
15 |       form: await superValidate(
16 |         {
17 |           ...user,
18 |           firstName: userName ? userName[0] : undefined,
19 |           lastName: userName ? userName[1] : undefined,
20 |           message: `Dear ${siteConfig.name} team...`,
21 |         },
22 |         contactUsSchema
23 |       ),
24 |     };
25 |   }
26 | 
27 |   return {
28 |     form: await superValidate(contactUsSchema),
29 |   };
30 | };
31 | 
32 | export const actions: Actions = {
33 |   default: async (event) => {
34 |     const form = await superValidate(event, contactUsSchema);
35 |     if (!form.valid) {
36 |       return fail(400, {
37 |         form,
38 |       });
39 |     }
40 | 
41 |     await sendEmail({
42 |       to: [siteConfig.email],
43 |       subject: "Contact Us Form Submission",
44 |       text: `
45 | Name: ${form.data.name}
46 | Email: ${form.data.email}
47 | Message: ${form.data.message}
48 | `,
49 |     });
50 | 
51 |     return {
52 |       form,
53 |     };
54 |   },
55 | };
56 | 


--------------------------------------------------------------------------------
/src/routes/(app)/+layout.server.ts:
--------------------------------------------------------------------------------
 1 | import { Config } from "@sveltejs/adapter-vercel";
 2 | 
 3 | export const prerender = false;
 4 | export async function load(event) {
 5 |   const session = event.locals.session;
 6 |   return {
 7 |     session,
 8 |   };
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/routes/(app)/+layout.svelte:
--------------------------------------------------------------------------------
1 | <slot />
2 | 


--------------------------------------------------------------------------------
/src/routes/(app)/auth/(not-authed)/+layout.server.ts:
--------------------------------------------------------------------------------
 1 | import { redirect } from "@sveltejs/kit";
 2 | import { siteConfig } from "$lib/config/site";
 3 | 
 4 | export async function load(event) {
 5 |   const session = event.locals.session;
 6 |   if (session) {
 7 |     const searchParams = new URL(event.request.url).searchParams;
 8 |     const redirectUrl = searchParams.get("next") || siteConfig.afterLogin;
 9 |     throw redirect(303, redirectUrl);
10 |   }
11 | 
12 |   return {};
13 | }
14 | 


--------------------------------------------------------------------------------
/src/routes/(app)/auth/(not-authed)/sign-up/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { Icons } from "$components/icons";
 3 |   import { Container, Shell } from "$components/layout";
 4 |   import {
 5 |     Card,
 6 |     CardContent,
 7 |     CardDescription,
 8 |     CardFooter,
 9 |     CardHeader,
10 |     CardTitle,
11 |   } from "$components/ui/card";
12 |   import { siteConfig } from "$lib/config/site";
13 | </script>
14 | 
15 | <Shell variant="auth">
16 |   <Container variant="centered">
17 |     <Card>
18 |       <CardHeader class="space-y-1">
19 |         <CardTitle class="text-2xl">
20 |           Join {siteConfig.name}
21 |         </CardTitle>
22 |         <CardDescription>
23 |           {siteConfig.description}
24 |         </CardDescription>
25 |       </CardHeader>
26 |       <CardContent class="grid gap-4">TODO</CardContent>
27 | 
28 |       <CardFooter class="grid gap-4">
29 |         <div class="text-sm text-muted-foreground">
30 |           Already have an account?{" "}
31 |           <a
32 |             aria-label="Sign in"
33 |             href="/auth/sign-in"
34 |             class="text-primary underline-offset-4 transition-colors hover:underline"
35 |           >
36 |             Sign in
37 |           </a>
38 |         </div>
39 |       </CardFooter>
40 |     </Card>
41 |   </Container>
42 | </Shell>
43 | 


--------------------------------------------------------------------------------
/src/routes/(app)/auth/(not-authed)/verify-req/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { Container, Heading, Shell } from "$components/layout";
 3 | </script>
 4 | 
 5 | <Shell variant="auth" className="max-w-xl">
 6 |   <Container variant="centered">
 7 |     <Heading
 8 |       title="Check your Inbox!"
 9 |       size="sm"
10 |       description="A verification email has been sent to your email address. Please check
11 |         your inbox and click on the link provided. Make sure to also check your
12 |         spam folder. Just in case."
13 |       className="text-center"
14 |       descriptionClassName="line-clamp-10"
15 |     />
16 |   </Container>
17 | </Shell>
18 | 


--------------------------------------------------------------------------------
/src/routes/(app)/auth/(not-authed)/verify-req/+page.ts:
--------------------------------------------------------------------------------
1 | export const prerender = true;
2 | 


--------------------------------------------------------------------------------
/src/routes/(app)/auth/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import BackButton from "$lib/components/back-button.svelte";
 3 |   import { Icons } from "$lib/components/icons";
 4 |   import { cn } from "$lib/utils";
 5 | </script>
 6 | 
 7 | <BackButton variant="ghost" class={cn("absolute left-4 top-10 z-[999]")}>
 8 |   <Icons.chevronLeft aria-hidden="true" class="mr-2" />
 9 |   Back
10 | </BackButton>
11 | 
12 | <main class="w-screen h-screen max-h-screen">
13 |   <slot />
14 | </main>
15 | 


--------------------------------------------------------------------------------
/src/routes/(app)/auth/auth-error/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import ErrorCard from "$components/error-card.svelte";
 3 |   import { Container, Shell } from "$components/layout";
 4 |   import { onMount } from "svelte";
 5 | 
 6 |   let error: string | null = null;
 7 |   onMount(() => {
 8 |     const searchParams = new URLSearchParams(window.location.search);
 9 |     error = searchParams.get("error");
10 |   });
11 | </script>
12 | 
13 | <Shell variant="auth">
14 |   <Container variant="centered">
15 |     <ErrorCard title="Authentication Error" description={error} />
16 |   </Container>
17 | </Shell>
18 | 


--------------------------------------------------------------------------------
/src/routes/(app)/auth/sign-out/+page.server.ts:
--------------------------------------------------------------------------------
1 | import { redirect } from "@sveltejs/kit";
2 | 
3 | export async function load(event) {
4 |   const session = event.locals.session;
5 |   if (!session) {
6 |     throw redirect(303, "/");
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/routes/(app)/auth/sign-out/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { signOut } from "@auth/sveltekit/client";
 3 |   import BackButton from "$components/back-button.svelte";
 4 |   import { Container, Heading, Shell } from "$components/layout";
 5 |   import { Button } from "$components/ui/button";
 6 |   import { toast } from "svelte-sonner";
 7 | 
 8 |   let loading = false;
 9 | 
10 |   const handleSignOut = async () => {
11 |     loading = true;
12 |     await signOut().catch((error) => {
13 |       console.error(error);
14 |       toast.error("An unexpected error occurred. Please try again later.");
15 |       loading = false;
16 |     });
17 |   };
18 | </script>
19 | 
20 | <Shell variant="auth" class="max-w-xs ">
21 |   <Container variant="centered">
22 |     <Heading
23 |       title="Sign out"
24 |       description="Are you sure you want to sign out?"
25 |       size="sm"
26 |       class="text-center"
27 |     />
28 | 
29 |     <div class="flex w-full items-center justify-center space-x-2">
30 |       <Button {loading} on:click={handleSignOut}>Log out</Button>
31 |       <BackButton variant="secondary">Go back</BackButton>
32 |     </div>
33 |   </Container>
34 | </Shell>
35 | 


--------------------------------------------------------------------------------
/src/routes/(app)/chat/+layout.server.ts:
--------------------------------------------------------------------------------
 1 | import { redirect } from "@sveltejs/kit";
 2 | import { chatDb } from "$server/db/chat-db";
 3 | 
 4 | import type { PageServerLoad } from "./$types";
 5 | 
 6 | export const load: PageServerLoad = async ({ url, locals }) => {
 7 |   const id = url.searchParams.get("id");
 8 |   const session = await locals.getSession();
 9 |   if (!session?.user) {
10 |     throw redirect(302, `/auth/sign-in?next=/chat?${id}`);
11 |   }
12 | 
13 |   let chat = id
14 |     ? await chatDb.getLatestChat({ user: session.user })
15 |     : await chatDb.getChat(id, { user: session.user });
16 | 
17 |   if (!chat) {
18 |     await chatDb.createChat(
19 |       { userId: session.user.id },
20 |       { user: session.user }
21 |     );
22 | 
23 |     chat = await chatDb.getLatestChat({ user: session.user });
24 |   }
25 | 
26 |   const chatsWithoutMessages = await chatDb.getChatsWithoutMessages({
27 |     user: session.user,
28 |   });
29 | 
30 |   return { chat, chats: chatsWithoutMessages };
31 | };
32 | 


--------------------------------------------------------------------------------
/src/routes/(app)/chat/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { page } from "$app/stores";
 3 |   import { Container, Shell, SiteFooter, SiteHeader } from "$components/layout";
 4 |   import SidebarFooter from "$lib/components/chat/chat-sidebar-footer.svelte";
 5 |   import SidebarList from "$lib/components/chat/chat-sidebar-list.svelte";
 6 |   import Sidebar from "$lib/components/chat/chat-sidebar.svelte";
 7 |   import ClearHistory from "$lib/components/chat/clear-history.svelte";
 8 | </script>
 9 | 
10 | <div class="bg-background min-h-full w-full flex flex-col">
11 |   <SiteHeader></SiteHeader>
12 | 
13 |   <main class="flex-1 w-full">
14 |     <Shell variant="fullScreen" class="p-0 md:p-0">
15 |       <div class="relative w-full h-full pt-16">
16 |         <slot />
17 |       </div>
18 | 
19 |       <div class="absolute right-8 top-20">
20 |         <Sidebar>
21 |           <SidebarList chats={$page.data.chats} />
22 |           <SidebarFooter>
23 |             <ClearHistory />
24 |           </SidebarFooter>
25 |         </Sidebar>
26 |       </div>
27 |     </Shell>
28 |   </main>
29 | </div>
30 | 


--------------------------------------------------------------------------------
/src/routes/(app)/chat/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import Chat from "$lib/components/chat/chat.svelte";
 3 | 
 4 |   import type { PageServerData } from "./$types";
 5 | 
 6 |   export let data: PageServerData;
 7 |   const { chat } = data;
 8 | </script>
 9 | 
10 | <Chat id={chat.id} initialMessages={chat.messages} />
11 | 


--------------------------------------------------------------------------------
/src/routes/(app)/chat/button-scroll-to-bottom.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { Icons } from "$lib/components/icons";
 3 |   import { Button } from "$lib/components/ui/button";
 4 |   import { cn } from "$lib/utils";
 5 | 
 6 |   let className: string | undefined | null = undefined;
 7 |   export { className as class };
 8 | 
 9 |   let isAtBottom = false;
10 |   function handleScroll() {
11 |     isAtBottom =
12 |       window.innerHeight + window.scrollY >= document.body.offsetHeight;
13 |   }
14 | </script>
15 | 
16 | <svelte:window on:scroll={handleScroll} />
17 | 
18 | <Button
19 |   variant="outline"
20 |   size="icon"
21 |   class={cn(
22 |     "transition-opacity",
23 |     isAtBottom ? "opacity-0" : "opacity-100",
24 |     className
25 |   )}
26 |   on:click={() =>
27 |     window.scrollTo({
28 |       top: document.body.offsetHeight,
29 |       behavior: "smooth",
30 |     })}
31 |   {...$$restProps}
32 | >
33 |   <Icons.arrowDown class="w-5 h-5" />
34 |   <span class="sr-only">Scroll to bottom</span>
35 | </Button>
36 | 


--------------------------------------------------------------------------------
/src/routes/(app)/chat/chat-list.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { Separator } from "$lib/components/ui/separator";
 3 |   import type { UseChatHelpers } from "ai/svelte";
 4 | 
 5 |   import ChatMessage from "./chat-message.svelte";
 6 | 
 7 |   export let messages: UseChatHelpers["messages"];
 8 | </script>
 9 | 
10 | {#if $messages?.length}
11 |   <div class="relative mx-auto max-w-2xl px-4">
12 |     {#each $messages as message, index}
13 |       <div>
14 |         <ChatMessage {message} />
15 |         {#if index < $messages.length - 1}
16 |           <Separator class="my-4 md:my-8" />
17 |         {/if}
18 |       </div>
19 |     {/each}
20 |   </div>
21 | {/if}
22 | 


--------------------------------------------------------------------------------
/src/routes/(app)/chat/chat-message-actions.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import CopyButton from "$components/copy-button.svelte";
 3 |   import { cn } from "$lib/utils";
 4 |   import type { Message } from "ai";
 5 | 
 6 |   export let message: Message;
 7 | 
 8 |   let className: string | undefined | null = undefined;
 9 |   export { className as class };
10 | </script>
11 | 
12 | <div
13 |   class={cn(
14 |     "flex items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0",
15 |     className
16 |   )}
17 |   {...$$restProps}
18 | >
19 |   <CopyButton class="absolute" value={message.content}></CopyButton>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/src/routes/(app)/chat/chat-message.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { page } from "$app/stores";
 3 |   import { Icons } from "$lib/components/icons";
 4 |   import UserAvatar from "$lib/components/user-avatar.svelte";
 5 |   import { cn } from "$lib/utils";
 6 |   import type { Message } from "ai";
 7 | 
 8 |   import ChatMessageActions from "./chat-message-actions.svelte";
 9 | 
10 |   export let message: Message;
11 |   const user = $page.data.session?.user;
12 | </script>
13 | 
14 | <div
15 |   class={cn("group relative mb-4 flex items-start md:-ml-12")}
16 |   {...$$restProps}
17 | >
18 |   <div
19 |     class={cn(
20 |       "flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow",
21 |       message.role === "user"
22 |         ? "bg-background"
23 |         : "bg-primary text-primary-foreground"
24 |     )}
25 |   >
26 |     {#if message.role === "user"}
27 |       <UserAvatar user={user ?? {}} />
28 |     {:else}
29 |       <Icons.ai />
30 |     {/if}
31 |   </div>
32 |   <div class="ml-4 flex-1 space-y-2 overflow-hidden px-1">
33 |     {message.content}
34 |   </div>
35 |   <ChatMessageActions {message} />
36 | </div>
37 | 


--------------------------------------------------------------------------------
/src/routes/(app)/chat/chat-sidebar-footer.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { cn } from "$lib/utils";
 3 | 
 4 |   let className: string | undefined | null = undefined;
 5 |   export { className as class };
 6 | </script>
 7 | 
 8 | <div
 9 |   class={cn("flex items-center justify-between p-4", className)}
10 |   {...$$restProps}
11 | >
12 |   <slot />
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/routes/(app)/chat/chat-sidebar-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { page } from "$app/stores";
 3 |   import { Icons } from "$lib/components/icons";
 4 |   import { Button } from "$lib/components/ui/button";
 5 |   import {
 6 |     Tooltip,
 7 |     TooltipContent,
 8 |     TooltipTrigger,
 9 |   } from "$lib/components/ui/tooltip";
10 |   import type { Chat } from "$lib/types/db";
11 |   import { cn } from "$lib/utils";
12 | 
13 |   export let chat: Chat;
14 | 
15 |   $: isActive = $page.params.id === chat.id;
16 | </script>
17 | 
18 | <div class="relative">
19 |   <div class="absolute left-2 top-1 flex h-6 w-6 items-center justify-center">
20 |     {#if chat.sharePath}
21 |       <Tooltip>
22 |         <TooltipTrigger
23 |           tabindex={-1}
24 |           class="focus:bg-muted focus:ring-1 focus:ring-ring"
25 |         >
26 |           <Icons.users class="mr-2" />
27 |         </TooltipTrigger>
28 |         <TooltipContent>This is a shared chat.</TooltipContent>
29 |       </Tooltip>
30 |     {:else}
31 |       <Icons.message class="mr-2" />
32 |     {/if}
33 |   </div>
34 |   <Button
35 |     href={chat.path}
36 |     variant="ghost"
37 |     class={cn("group w-full pl-8 pr-16", isActive && "bg-accent")}
38 |   >
39 |     <div
40 |       class="relative max-h-5 flex-1 select-none overflow-hidden text-ellipsis break-all"
41 |       title={chat.name}
42 |     >
43 |       <span class="whitespace-nowrap">{chat.name}</span>
44 |     </div>
45 |   </Button>
46 |   {#if isActive}
47 |     <div class="absolute right-2 top-1">
48 |       <slot />
49 |     </div>
50 |   {/if}
51 | </div>
52 | 


--------------------------------------------------------------------------------
/src/routes/(app)/chat/chat-sidebar-list.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import SidebarActions from "$lib/components/chat/chat-sidebar-actions.svelte";
 3 |   import SidebarItem from "$lib/components/chat/chat-sidebar-item.svelte";
 4 |   import type { Chat } from "$lib/types/db";
 5 | 
 6 |   export let chats: Chat[];
 7 | 
 8 |   const removeChat = void 0;
 9 |   const shareChat = void 0;
10 | </script>
11 | 
12 | <div class="flex-1 overflow-auto">
13 |   {#if chats.length}
14 |     <div class="space-y-2 px-2">
15 |       {#each chats as chat (chat.id)}
16 |         <SidebarItem {chat}>
17 |           <SidebarActions {chat} />
18 |         </SidebarItem>
19 |       {/each}
20 |     </div>
21 |   {:else}
22 |     <div class="p-8 text-center">
23 |       <p class="text-sm text-muted-foreground">No chat history</p>
24 |     </div>
25 |   {/if}
26 | </div>
27 | 


--------------------------------------------------------------------------------
/src/routes/(app)/chat/chat-sidebar.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { Icons } from "$lib/components/icons";
 3 |   import { Button } from "$lib/components/ui/button";
 4 |   import {
 5 |     Sheet,
 6 |     SheetContent,
 7 |     SheetHeader,
 8 |     SheetTitle,
 9 |     SheetTrigger,
10 |   } from "$lib/components/ui/sheet";
11 | </script>
12 | 
13 | <Sheet>
14 |   <SheetTrigger>
15 |     <Button variant="ghost" class="-ml-2 h-9 w-9 p-0">
16 |       <Icons.sidebar class="h-6 w-6" />
17 |       <span class="sr-only">Toggle Sidebar</span>
18 |     </Button>
19 |   </SheetTrigger>
20 |   <SheetContent
21 |     class="inset-y-0 flex h-auto w-[300px] max-w-[300px] flex-col p-0"
22 |   >
23 |     <SheetHeader class="p-4">
24 |       <SheetTitle class="text-sm">Chat History</SheetTitle>
25 |     </SheetHeader>
26 |     <slot />
27 |   </SheetContent>
28 | </Sheet>
29 | 


--------------------------------------------------------------------------------
/src/routes/(app)/chat/chat.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { cn } from "$lib/utils";
 3 |   import { useChat, type Message } from "ai/svelte";
 4 |   import { toast } from "svelte-sonner";
 5 | 
 6 |   import ChatList from "./chat-list.svelte";
 7 |   import ChatPanel from "./chat-panel.svelte";
 8 |   import EmptyScreen from "./empty-screen.svelte";
 9 | 
10 |   export let id: string | undefined = undefined;
11 |   export let initialMessages: Message[] | undefined = undefined;
12 |   let className: string | undefined | null = undefined;
13 |   export { className as class };
14 | 
15 |   const { messages, append, reload, stop, isLoading, input } = useChat({
16 |     initialMessages,
17 |     id,
18 |     body: {
19 |       id,
20 |     },
21 |     onError: (err) => {
22 |       console.error(err);
23 |       toast.error("An unexpected error occurred. Please try again later.", {
24 |         description: err.message,
25 |       });
26 |     },
27 |   });
28 | </script>
29 | 
30 | <div class={cn("pb-[200px] pt-4 md:pt-10", className)}>
31 |   {#if $messages.length}
32 |     <ChatList {messages} />
33 |   {:else}
34 |     <EmptyScreen {input} />
35 |   {/if}
36 | </div>
37 | 
38 | <ChatPanel {id} {isLoading} {stop} {append} {reload} {messages} {input} />
39 | 


--------------------------------------------------------------------------------
/src/routes/(app)/chat/footer-text.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { cn } from "$lib/utils";
 3 | 
 4 |   let className: string | undefined | null = undefined;
 5 |   export { className as class };
 6 | </script>
 7 | 
 8 | <p
 9 |   class={cn(
10 |     "px-2 text-center text-xs leading-normal text-muted-foreground",
11 |     className
12 |   )}
13 |   {...$$restProps}
14 | >
15 |   Best in class
16 | </p>
17 | 


--------------------------------------------------------------------------------
/src/routes/(app)/dashboard/+layout.server.ts:
--------------------------------------------------------------------------------
 1 | import type { Session } from "@auth/core/types";
 2 | import { getOrRedirect } from "$lib/auth";
 3 | 
 4 | import type { LayoutServerLoad } from "./$types";
 5 | 
 6 | export const load: LayoutServerLoad = async (event) => {
 7 |   const session = getOrRedirect(event.locals.session as Session);
 8 |   return {
 9 |     session,
10 |   };
11 | };
12 | 


--------------------------------------------------------------------------------
/src/routes/(app)/dashboard/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { page } from "$app/stores";
 3 |   import Cookies from "$components/cookies.svelte";
 4 |   import { SidebarNav, SiteFooter, SiteHeader } from "$components/layout";
 5 |   import { dashboardConfig } from "$lib/config/dashboard";
 6 | 
 7 |   const user = $page.data.session?.user;
 8 | </script>
 9 | 
10 | <div class="flex min-h-screen flex-col">
11 |   <SiteHeader sidebarNavItems={dashboardConfig.sidebarNav} />
12 | 
13 |   <div
14 |     class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
15 |   >
16 |     <aside
17 |       class="fixed top-14 z-30 hidden h-full w-full shrink-0 overflow-y-auto md:sticky md:block"
18 |     >
19 |       <div class="py-6 pr-6 lg:py-6 h-full">
20 |         <SidebarNav items={dashboardConfig.sidebarNav} />
21 |       </div>
22 |     </aside>
23 | 
24 |     <main class="flex w-full flex-col overflow-hidden">
25 |       <Cookies />
26 | 
27 |       <slot />
28 |     </main>
29 |   </div>
30 | 
31 |   <SiteFooter />
32 | </div>
33 | 


--------------------------------------------------------------------------------
/src/routes/(app)/dashboard/+page.ts:
--------------------------------------------------------------------------------
1 | import { redirect } from "@sveltejs/kit";
2 | 
3 | export function load() {
4 |   throw redirect(307, "/dashboard/account");
5 | }
6 | 


--------------------------------------------------------------------------------
/src/routes/(app)/dashboard/account/+page.server.ts:
--------------------------------------------------------------------------------
 1 | import { fail, type Actions } from "@sveltejs/kit";
 2 | import { accountFormSchema } from "$lib/schemas/account-schema";
 3 | import { userDb } from "$server/db/user-db";
 4 | import { superValidate } from "sveltekit-superforms/server";
 5 | 
 6 | import type { PageServerLoad } from "./$types";
 7 | 
 8 | export const load: PageServerLoad = async (event) => {
 9 |   const user = event.locals.session?.user ?? { name: "" };
10 |   return {
11 |     form: (await user?.name)
12 |       ? superValidate(user, accountFormSchema)
13 |       : superValidate(accountFormSchema),
14 |   };
15 | };
16 | 
17 | export const actions: Actions = {
18 |   default: async (event) => {
19 |     const form = await superValidate(event, accountFormSchema);
20 |     if (!form.valid) {
21 |       return fail(400, {
22 |         form,
23 |       });
24 |     }
25 | 
26 |     await userDb.updateUser(form.data, {
27 |       user: event.locals.session?.user,
28 |     });
29 | 
30 |     return {
31 |       form,
32 |     };
33 |   },
34 | };
35 | 


--------------------------------------------------------------------------------
/src/routes/+layout.server.ts:
--------------------------------------------------------------------------------
1 | export const prerender = true;
2 | 


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { page } from "$app/stores";
 3 |   import Cookies from "$components/cookies.svelte";
 4 |   import SvelteTheme from "$components/svelte-themes/SvelteTheme.svelte";
 5 |   import Toaster from "$components/toaster.svelte";
 6 |   import { webVitals } from "$lib/vitals";
 7 | 
 8 |   import "../app.postcss";
 9 | 
10 |   import { browser } from "$app/environment";
11 |   import { onNavigate } from "$app/navigation";
12 | 
13 |   let analyticsId = import.meta.env.VERCEL_ANALYTICS_ID;
14 |   onNavigate(({ complete }) => {
15 |     if (!document?.startViewTransition) {
16 |       return;
17 |     }
18 | 
19 |     return new Promise((resolve) => {
20 |       document.startViewTransition(async () => {
21 |         resolve();
22 |         await complete;
23 |       });
24 |     });
25 |   });
26 | 
27 |   $: if (browser && analyticsId) {
28 |     webVitals({
29 |       path: $page.url.pathname,
30 |       params: $page.params,
31 |       analyticsId,
32 |     });
33 |   }
34 | </script>
35 | 
36 | <slot />
37 | 
38 | <Cookies class="fixed bottom-6 left-6"></Cookies>
39 | <SvelteTheme
40 |   attribute="class"
41 |   themes={["dark", "light"]}
42 |   defaultTheme="system"
43 | />
44 | <Toaster />
45 | 


--------------------------------------------------------------------------------
/src/routes/api/auth/session/+server.ts:
--------------------------------------------------------------------------------
1 | import { json } from "@sveltejs/kit";
2 | 
3 | export async function GET(event) {
4 |   const session = event.locals.session;
5 |   return json({
6 |     session: session ?? null,
7 |   });
8 | }
9 | 


--------------------------------------------------------------------------------
/src/routes/api/chat/+server.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "@sveltejs/adapter-vercel";
 2 | import { redirect } from "@sveltejs/kit";
 3 | import { OPENAI_API_KEY } from "$env/static/private";
 4 | import { OpenAIStream, StreamingTextResponse } from "ai";
 5 | import { Configuration, OpenAIApi } from "openai-edge";
 6 | 
 7 | import type { RequestHandler } from "./$types";
 8 | 
 9 | const openAiConfig = new Configuration({
10 |   apiKey: OPENAI_API_KEY,
11 | });
12 | const openai = new OpenAIApi(openAiConfig);
13 | 
14 | export const POST = (async ({ request, locals: { getSession } }) => {
15 |   const json = await request.json();
16 |   const { messages } = json;
17 |   const session = await getSession();
18 |   if (!session?.user) {
19 |     throw redirect(302, `/auth/sign-in`);
20 |   }
21 | 
22 |   // Create an OpenAI API client
23 | 
24 |   // Ask OpenAI for a streaming chat completion given the prompt
25 |   const response = await openai.createChatCompletion({
26 |     model: "gpt-3.5-turbo",
27 |     messages,
28 |     temperature: 0.7,
29 |     stream: true,
30 |   });
31 | 
32 |   // Convert the response into a friendly text-stream
33 |   const stream = OpenAIStream(response);
34 | 
35 |   // Respond with the stream
36 |   return new StreamingTextResponse(stream);
37 | }) satisfies RequestHandler;
38 | 


--------------------------------------------------------------------------------
/src/server/db/index.ts:
--------------------------------------------------------------------------------
 1 | import { createClient } from "@libsql/client";
 2 | import { DATABASE_AUTH_TOKEN, DATABASE_URL } from "$env/static/private";
 3 | import { drizzle } from "drizzle-orm/libsql";
 4 | 
 5 | import * as schema from "./schema";
 6 | 
 7 | const db = drizzle(
 8 |   createClient({
 9 |     url: DATABASE_URL,
10 |     authToken: DATABASE_AUTH_TOKEN ?? undefined,
11 |   }),
12 |   {
13 |     logger: process.env.NODE_ENV !== "production",
14 |   }
15 | );
16 | 
17 | export { db, schema };
18 | 


--------------------------------------------------------------------------------
/src/server/db/user-db.ts:
--------------------------------------------------------------------------------
 1 | import type { AdapterUser } from "@auth/core/adapters";
 2 | import type { User } from "@auth/core/types";
 3 | import { eq } from "drizzle-orm";
 4 | 
 5 | import { db } from "./index";
 6 | import { users } from "./schema";
 7 | 
 8 | interface UserDbParams {
 9 |   user: User;
10 | }
11 | export const userDb = {
12 |   updateUser: async (
13 |     data: Omit<Partial<AdapterUser>, "id">,
14 |     { user }: UserDbParams
15 |   ) => await db.update(users).set(data).where(eq(users.id, user.id)),
16 | };
17 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/juliuslipp/sveltekit-shadcn-ai/07d1ff53476e335cf06e66892fc6d4d41f4b230e/static/favicon.png


--------------------------------------------------------------------------------
/static/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from "@sveltejs/adapter-vercel";
 2 | import { vitePreprocess } from "@sveltejs/kit/vite";
 3 | import { mdsvex } from "mdsvex";
 4 | 
 5 | import mdsvexConfig from "./mdsvex.config.mjs";
 6 | 
 7 | /** @type {import('@sveltejs/kit').Config} */
 8 | const config = {
 9 |   extensions: [".svelte", ...(mdsvexConfig.extensions ?? [])],
10 |   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
11 |   // for more information about preprocessors
12 |   preprocess: [vitePreprocess({}), mdsvex(mdsvexConfig)],
13 |   kit: {
14 |     // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
15 |     // If your environment is not supported or you settled on a specific environment, switch out the adapter.
16 |     // See https://kit.svelte.dev/docs/adapters for more information about adapters.
17 |     adapter: adapter(),
18 |     alias: {
19 |       $components: "./src/lib/components",
20 |       $lib: "./src/lib",
21 |       $db: "./src/db",
22 |       $server: "./src/server",
23 |       $content: "./src/content",
24 |     },
25 |   },
26 | };
27 | 
28 | export default config;
29 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./.svelte-kit/tsconfig.json",
 3 |   "env": {
 4 |     "browser": true,
 5 |     "es2022": true
 6 |   },
 7 |   "compilerOptions": {
 8 |     "allowJs": true,
 9 |     "checkJs": true,
10 |     "esModuleInterop": true,
11 |     "forceConsistentCasingInFileNames": true,
12 |     "resolveJsonModule": true,
13 |     "skipLibCheck": true,
14 |     "sourceMap": true,
15 |     "strict": true,
16 |     "lib": [
17 |       "es2020"
18 |     ],
19 |     "module": "es2022"
20 |   },
21 |   // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
22 |   //
23 |   // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
24 |   // from the referenced tsconfig.json - TypeScript does not merge them in
25 |   "include": [
26 |     "*.mjs",
27 |     "*.js",
28 |     "*.cjs",
29 |     "*.ts",
30 |     "*.svelte"
31 |   ]
32 | }
33 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from "@sveltejs/kit/vite";
2 | import { defineConfig } from "vite";
3 | 
4 | export default defineConfig({
5 |   plugins: [sveltekit()],
6 | });
7 | 


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