├── .env.example
├── .eslintignore
├── .eslintrc.cjs
├── .gitignore
├── .npmrc
├── .prettierignore
├── .prettierrc
├── README.md
├── components.json
├── docker-compose.yml
├── package-lock.json
├── package.json
├── playwright.config.ts
├── postcss.config.cjs
├── prisma
    ├── migrations
    │   ├── 20240401175450_init
    │   │   └── migration.sql
    │   ├── 20240401180000_email_password
    │   │   └── migration.sql
    │   ├── 20240402172433_roles
    │   │   └── migration.sql
    │   ├── 20240402173057_roles
    │   │   └── migration.sql
    │   ├── 20240403210817_reset_password
    │   │   └── migration.sql
    │   ├── 20240404172901_stripe_integration
    │   │   └── migration.sql
    │   ├── 20240404173514_unique_name
    │   │   └── migration.sql
    │   ├── 20240405165940_change_relation
    │   │   └── migration.sql
    │   ├── 20240405170041_change_relation2
    │   │   └── migration.sql
    │   └── migration_lock.toml
    ├── schema.prisma
    └── seed
    │   └── products.ts
├── src
    ├── app.d.ts
    ├── app.html
    ├── app.pcss
    ├── hooks.server.ts
    ├── index.test.ts
    ├── lib
    │   ├── components
    │   │   ├── forms
    │   │   │   └── ResetPasswordForm.svelte
    │   │   ├── layout
    │   │   │   ├── AppShell.svelte
    │   │   │   └── LightSwitch.svelte
    │   │   ├── policy
    │   │   │   └── CookieBanner.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
    │   │   │   ├── breadcrumb
    │   │   │       ├── breadcrumb-ellipsis.svelte
    │   │   │       ├── breadcrumb-item.svelte
    │   │   │       ├── breadcrumb-link.svelte
    │   │   │       ├── breadcrumb-list.svelte
    │   │   │       ├── breadcrumb-page.svelte
    │   │   │       ├── breadcrumb-separator.svelte
    │   │   │       ├── breadcrumb.svelte
    │   │   │       └── index.ts
    │   │   │   ├── button
    │   │   │       ├── button.svelte
    │   │   │       └── index.ts
    │   │   │   ├── calendar
    │   │   │       ├── calendar-cell.svelte
    │   │   │       ├── calendar-day.svelte
    │   │   │       ├── calendar-grid-body.svelte
    │   │   │       ├── calendar-grid-head.svelte
    │   │   │       ├── calendar-grid-row.svelte
    │   │   │       ├── calendar-grid.svelte
    │   │   │       ├── calendar-head-cell.svelte
    │   │   │       ├── calendar-header.svelte
    │   │   │       ├── calendar-heading.svelte
    │   │   │       ├── calendar-months.svelte
    │   │   │       ├── calendar-next-button.svelte
    │   │   │       ├── calendar-prev-button.svelte
    │   │   │       ├── calendar.svelte
    │   │   │       └── index.ts
    │   │   │   ├── card
    │   │   │       ├── card-content.svelte
    │   │   │       ├── card-description.svelte
    │   │   │       ├── card-footer.svelte
    │   │   │       ├── card-header.svelte
    │   │   │       ├── card-title.svelte
    │   │   │       ├── card.svelte
    │   │   │       └── index.ts
    │   │   │   ├── carousel
    │   │   │       ├── carousel-content.svelte
    │   │   │       ├── carousel-item.svelte
    │   │   │       ├── carousel-next.svelte
    │   │   │       ├── carousel-previous.svelte
    │   │   │       ├── carousel.svelte
    │   │   │       ├── context.ts
    │   │   │       └── index.ts
    │   │   │   ├── checkbox
    │   │   │       ├── checkbox.svelte
    │   │   │       └── index.ts
    │   │   │   ├── collapsible
    │   │   │       ├── collapsible-content.svelte
    │   │   │       └── index.ts
    │   │   │   ├── command
    │   │   │       ├── command-dialog.svelte
    │   │   │       ├── command-empty.svelte
    │   │   │       ├── command-group.svelte
    │   │   │       ├── command-input.svelte
    │   │   │       ├── command-item.svelte
    │   │   │       ├── command-list.svelte
    │   │   │       ├── command-separator.svelte
    │   │   │       ├── command-shortcut.svelte
    │   │   │       ├── command.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
    │   │   │   ├── drawer
    │   │   │       ├── drawer-content.svelte
    │   │   │       ├── drawer-description.svelte
    │   │   │       ├── drawer-footer.svelte
    │   │   │       ├── drawer-header.svelte
    │   │   │       ├── drawer-nested.svelte
    │   │   │       ├── drawer-overlay.svelte
    │   │   │       ├── drawer-title.svelte
    │   │   │       ├── drawer.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-description.svelte
    │   │   │       ├── form-element-field.svelte
    │   │   │       ├── form-field-errors.svelte
    │   │   │       ├── form-field.svelte
    │   │   │       ├── form-fieldset.svelte
    │   │   │       ├── form-label.svelte
    │   │   │       ├── form-legend.svelte
    │   │   │       └── index.ts
    │   │   │   ├── hover-card
    │   │   │       ├── hover-card-content.svelte
    │   │   │       └── index.ts
    │   │   │   ├── input
    │   │   │       ├── index.ts
    │   │   │       └── input.svelte
    │   │   │   ├── label
    │   │   │       ├── index.ts
    │   │   │       └── label.svelte
    │   │   │   ├── loader
    │   │   │       ├── index.ts
    │   │   │       ├── loader.svelte
    │   │   │       └── page-loader.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
    │   │   │   ├── pagination
    │   │   │       ├── index.ts
    │   │   │       ├── pagination-content.svelte
    │   │   │       ├── pagination-ellipsis.svelte
    │   │   │       ├── pagination-item.svelte
    │   │   │       ├── pagination-link.svelte
    │   │   │       ├── pagination-next-button.svelte
    │   │   │       ├── pagination-prev-button.svelte
    │   │   │       └── pagination.svelte
    │   │   │   ├── popover
    │   │   │       ├── index.ts
    │   │   │       └── popover-content.svelte
    │   │   │   ├── progress
    │   │   │       ├── index.ts
    │   │   │       └── progress.svelte
    │   │   │   ├── radio-group
    │   │   │       ├── index.ts
    │   │   │       ├── radio-group-item.svelte
    │   │   │       └── radio-group.svelte
    │   │   │   ├── range-calendar
    │   │   │       ├── index.ts
    │   │   │       ├── range-calendar-cell.svelte
    │   │   │       ├── range-calendar-day.svelte
    │   │   │       ├── range-calendar-grid-body.svelte
    │   │   │       ├── range-calendar-grid-head.svelte
    │   │   │       ├── range-calendar-grid-row.svelte
    │   │   │       ├── range-calendar-grid.svelte
    │   │   │       ├── range-calendar-head-cell.svelte
    │   │   │       ├── range-calendar-header.svelte
    │   │   │       ├── range-calendar-heading.svelte
    │   │   │       ├── range-calendar-months.svelte
    │   │   │       ├── range-calendar-next-button.svelte
    │   │   │       ├── range-calendar-prev-button.svelte
    │   │   │       └── range-calendar.svelte
    │   │   │   ├── resizable
    │   │   │       ├── index.ts
    │   │   │       ├── resizable-handle.svelte
    │   │   │       └── resizable-pane-group.svelte
    │   │   │   ├── scroll-area
    │   │   │       ├── index.ts
    │   │   │       ├── scroll-area-scrollbar.svelte
    │   │   │       └── scroll-area.svelte
    │   │   │   ├── select
    │   │   │       ├── index.ts
    │   │   │       ├── select-content.svelte
    │   │   │       ├── select-item.svelte
    │   │   │       ├── select-label.svelte
    │   │   │       ├── select-separator.svelte
    │   │   │       └── select-trigger.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
    │   │   │   ├── sonner
    │   │   │       ├── index.ts
    │   │   │       └── sonner.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-group
    │   │   │       ├── index.ts
    │   │   │       ├── toggle-group-item.svelte
    │   │   │       └── toggle-group.svelte
    │   │   │   ├── toggle
    │   │   │       ├── index.ts
    │   │   │       └── toggle.svelte
    │   │   │   └── tooltip
    │   │   │       ├── index.ts
    │   │   │       └── tooltip-content.svelte
    │   ├── index.ts
    │   ├── server
    │   │   └── auth.ts
    │   ├── shared
    │   │   ├── modules
    │   │   │   └── mailer
    │   │   │   │   ├── aws-mailer.ts
    │   │   │   │   ├── index.ts
    │   │   │   │   └── smtp-mailer.ts
    │   │   └── types
    │   │   │   └── mailer.ts
    │   └── utils.ts
    ├── routes
    │   ├── (protected)
    │   │   └── protected
    │   │   │   ├── +layout.server.ts
    │   │   │   ├── +layout.svelte
    │   │   │   ├── admin
    │   │   │       └── overview
    │   │   │       │   └── +page.svelte
    │   │   │   ├── another-page
    │   │   │       └── +page.svelte
    │   │   │   ├── bought-products
    │   │   │       ├── +page.server.ts
    │   │   │       └── +page.svelte
    │   │   │   ├── dashboard
    │   │   │       └── +page.svelte
    │   │   │   ├── logout
    │   │   │       ├── +page.server.ts
    │   │   │       └── +page.svelte
    │   │   │   ├── payment
    │   │   │       ├── cancel
    │   │   │       │   └── +page.svelte
    │   │   │       └── success
    │   │   │       │   └── +page.svelte
    │   │   │   ├── settings
    │   │   │       ├── +page.server.ts
    │   │   │       └── +page.svelte
    │   │   │   └── store
    │   │   │       ├── +page.server.ts
    │   │   │       └── +page.svelte
    │   ├── +layout.svelte
    │   ├── +page.svelte
    │   ├── api
    │   │   └── stripe
    │   │   │   └── webhook
    │   │   │       ├── +server.ts
    │   │   │       └── _stripe.ts
    │   ├── reset-password
    │   │   └── [token]
    │   │   │   ├── +page.server.ts
    │   │   │   └── +page.svelte
    │   ├── signin
    │   │   ├── +page.server.ts
    │   │   └── +page.svelte
    │   └── signup
    │   │   ├── +page.server.ts
    │   │   └── +page.svelte
    └── siteData.ts
├── static
    └── favicon.png
├── stripe-dev
    ├── .gitignore
    └── mac.md
├── svelte.config.js
├── tailwind.config.js
├── tests
    └── test.ts
├── tsconfig.json
└── vite.config.ts


/.env.example:
--------------------------------------------------------------------------------
 1 | NODE_ENV=development
 2 | BASE_URL=http://localhost:5173
 3 | 
 4 | # Database Settings
 5 | DATABASE_URL="postgresql://prisma:prisma@localhost:5432/sveltestarter"
 6 | 
 7 | 
 8 | SENDER_EMAIL=info@koesterjannik.com
 9 | 
10 | # AWS Settings (used for emails)
11 | AWS_ACCESS_KEY_ID=
12 | AWS_SECRET_ACCESS_KEY=
13 | AWS_REGION=eu-central-1
14 | SENDER_EMAIL=info@koesterjannik.com
15 | 
16 | # Stripe Settings
17 | STRIPE_SECRET_KEY=
18 | STRIPE_WEBHOOK_SECRET=
19 | 
20 | 


--------------------------------------------------------------------------------
/.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 | 


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


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | vite.config.js.timestamp-*
10 | vite.config.ts.timestamp-*
11 | data/


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


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Ignore files for PNPM, NPM and YARN
2 | pnpm-lock.yaml
3 | package-lock.json
4 | yarn.lock
5 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"useTabs": true,
 3 | 	"singleQuote": true,
 4 | 	"trailingComma": "none",
 5 | 	"printWidth": 100,
 6 | 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 7 | 	"overrides": [
 8 | 		{
 9 | 			"files": "*.svelte",
10 | 			"options": {
11 | 				"parser": "svelte"
12 | 			}
13 | 		}
14 | 	]
15 | }
16 | 


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


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: '3.8'
 2 | services:
 3 |   db:
 4 |     image: postgres:13
 5 |     restart: always
 6 |     environment:
 7 |       POSTGRES_USER: prisma
 8 |       POSTGRES_PASSWORD: prisma
 9 |       POSTGRES_DB: prisma
10 |     volumes:
11 |       - ./data:/var/lib/postgresql/data
12 |     ports:
13 |       - '5432:5432'
14 | 


--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------
 1 | import type { PlaywrightTestConfig } from '@playwright/test';
 2 | 
 3 | const config: PlaywrightTestConfig = {
 4 | 	webServer: {
 5 | 		command: 'npm run build && npm run preview',
 6 | 		port: 4173
 7 | 	},
 8 | 	testDir: 'tests',
 9 | 	testMatch: /(.+\.)?(test|spec)\.[jt]s/
10 | };
11 | 
12 | export default config;
13 | 


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
 1 | const tailwindcss = require('tailwindcss');
 2 | const autoprefixer = require('autoprefixer');
 3 | 
 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 | 	]
11 | };
12 | 
13 | module.exports = config;
14 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240401175450_init/migration.sql:
--------------------------------------------------------------------------------
 1 | -- CreateTable
 2 | CREATE TABLE "User" (
 3 |     "id" TEXT NOT NULL,
 4 | 
 5 |     CONSTRAINT "User_pkey" PRIMARY KEY ("id")
 6 | );
 7 | 
 8 | -- CreateTable
 9 | CREATE TABLE "Session" (
10 |     "id" TEXT NOT NULL,
11 |     "userId" TEXT NOT NULL,
12 |     "expiresAt" TIMESTAMP(3) NOT NULL,
13 | 
14 |     CONSTRAINT "Session_pkey" PRIMARY KEY ("id")
15 | );
16 | 
17 | -- AddForeignKey
18 | ALTER TABLE "Session" ADD CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
19 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240401180000_email_password/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - A unique constraint covering the columns `[email]` on the table `User` will be added. If there are existing duplicate values, this will fail.
 5 |   - Added the required column `email` to the `User` table without a default value. This is not possible if the table is not empty.
 6 |   - Added the required column `hashed_password` to the `User` table without a default value. This is not possible if the table is not empty.
 7 | 
 8 | */
 9 | -- AlterTable
10 | ALTER TABLE "User" ADD COLUMN     "email" TEXT NOT NULL,
11 | ADD COLUMN     "hashed_password" TEXT NOT NULL;
12 | 
13 | -- CreateIndex
14 | CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
15 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240402172433_roles/migration.sql:
--------------------------------------------------------------------------------
1 | -- CreateEnum
2 | CREATE TYPE "Role" AS ENUM ('USER', 'ADMIN');
3 | 
4 | -- AlterTable
5 | ALTER TABLE "User" ADD COLUMN     "role" "Role"[] DEFAULT ARRAY['USER']::"Role"[];
6 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240402173057_roles/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - You are about to drop the column `role` on the `User` table. All the data in the column will be lost.
 5 | 
 6 | */
 7 | -- AlterTable
 8 | ALTER TABLE "User" DROP COLUMN "role",
 9 | ADD COLUMN     "roles" "Role"[] DEFAULT ARRAY['USER']::"Role"[];
10 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240403210817_reset_password/migration.sql:
--------------------------------------------------------------------------------
 1 | -- CreateTable
 2 | CREATE TABLE "PasswordResetToken" (
 3 |     "id" TEXT NOT NULL,
 4 |     "userId" TEXT NOT NULL,
 5 |     "token" TEXT NOT NULL,
 6 |     "expiresAt" TIMESTAMP(3) NOT NULL,
 7 | 
 8 |     CONSTRAINT "PasswordResetToken_pkey" PRIMARY KEY ("id")
 9 | );
10 | 
11 | -- AddForeignKey
12 | ALTER TABLE "PasswordResetToken" ADD CONSTRAINT "PasswordResetToken_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
13 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240404173514_unique_name/migration.sql:
--------------------------------------------------------------------------------
1 | /*
2 |   Warnings:
3 | 
4 |   - A unique constraint covering the columns `[name]` on the table `Product` will be added. If there are existing duplicate values, this will fail.
5 | 
6 | */
7 | -- CreateIndex
8 | CREATE UNIQUE INDEX "Product_name_key" ON "Product"("name");
9 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240405165940_change_relation/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - You are about to drop the `_BoughtProductToUserPayment` table. If the table is not empty, all the data it contains will be lost.
 5 |   - Added the required column `userId` to the `UserPayment` table without a default value. This is not possible if the table is not empty.
 6 | 
 7 | */
 8 | -- DropForeignKey
 9 | ALTER TABLE "_BoughtProductToUserPayment" DROP CONSTRAINT "_BoughtProductToUserPayment_A_fkey";
10 | 
11 | -- DropForeignKey
12 | ALTER TABLE "_BoughtProductToUserPayment" DROP CONSTRAINT "_BoughtProductToUserPayment_B_fkey";
13 | 
14 | -- AlterTable
15 | ALTER TABLE "UserPayment" ADD COLUMN     "userId" TEXT NOT NULL;
16 | 
17 | -- DropTable
18 | DROP TABLE "_BoughtProductToUserPayment";
19 | 
20 | -- AddForeignKey
21 | ALTER TABLE "UserPayment" ADD CONSTRAINT "UserPayment_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
22 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240405170041_change_relation2/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - Added the required column `productId` to the `UserPayment` table without a default value. This is not possible if the table is not empty.
 5 | 
 6 | */
 7 | -- AlterTable
 8 | ALTER TABLE "UserPayment" ADD COLUMN     "productId" TEXT NOT NULL;
 9 | 
10 | -- AddForeignKey
11 | ALTER TABLE "UserPayment" ADD CONSTRAINT "UserPayment_productId_fkey" FOREIGN KEY ("productId") REFERENCES "Product"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
12 | 


--------------------------------------------------------------------------------
/prisma/migrations/migration_lock.toml:
--------------------------------------------------------------------------------
1 | # Please do not edit this file manually
2 | # It should be added in your version-control system (i.e. Git)
3 | provider = "postgresql"


--------------------------------------------------------------------------------
/prisma/seed/products.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient, Product } from '@prisma/client';
 2 | 
 3 | const db = new PrismaClient();
 4 | type ProductWithoutId = Omit<Product, 'id'>;
 5 | 
 6 | const products: ProductWithoutId[] = [
 7 | 	{
 8 | 		name: 'Product 1',
 9 | 		description: 'Description of product 1',
10 | 		price: 10.99,
11 | 		createdAt: new Date(),
12 | 		updatedAt: new Date()
13 | 	},
14 | 	{
15 | 		name: 'Product 2',
16 | 		description: 'Description of product 2',
17 | 		price: 20.99,
18 | 		createdAt: new Date(),
19 | 		updatedAt: new Date()
20 | 	},
21 | 	{
22 | 		name: 'Product 3',
23 | 		description: 'Description of product 3',
24 | 		price: 30.99,
25 | 		createdAt: new Date(),
26 | 		updatedAt: new Date()
27 | 	},
28 | 	{
29 | 		name: 'Product 4',
30 | 		description: 'Description of product 4',
31 | 		price: 40.99,
32 | 		createdAt: new Date(),
33 | 		updatedAt: new Date()
34 | 	},
35 | 	{
36 | 		name: 'Product 5',
37 | 		description: 'Description of product 5',
38 | 		price: 50.99,
39 | 		createdAt: new Date(),
40 | 		updatedAt: new Date()
41 | 	}
42 | ];
43 | 
44 | async function seedProducts() {
45 | 	for (const product of products) {
46 | 		const productName = product.name;
47 | 		const doesProductExist = await db.product.findUnique({
48 | 			where: {
49 | 				name: productName
50 | 			}
51 | 		});
52 | 		if (doesProductExist) continue;
53 | 		await db.product.create({ data: product });
54 | 	}
55 | 	console.log('Products seeded');
56 | }
57 | 
58 | seedProducts();
59 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | declare global {
 2 | 	namespace App {
 3 | 		interface Locals {
 4 | 			user: import('lucia').User | null;
 5 | 			session: import('lucia').Session | null;
 6 | 		}
 7 | 	}
 8 | }
 9 | 
10 | export {};
11 | 


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


--------------------------------------------------------------------------------
/src/index.test.ts:
--------------------------------------------------------------------------------
1 | import { describe, it, expect } from 'vitest';
2 | 
3 | describe('sum test', () => {
4 | 	it('adds 1 + 2 to equal 3', () => {
5 | 		expect(1 + 2).toBe(3);
6 | 	});
7 | });
8 | 


--------------------------------------------------------------------------------
/src/lib/components/layout/LightSwitch.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import Sun from 'svelte-radix/Sun.svelte';
 3 | 	import Moon from 'svelte-radix/Moon.svelte';
 4 | 	import { toggleMode } from 'mode-watcher';
 5 | 	import { Button } from '$lib/components/ui/button/index.js';
 6 | </script>
 7 | 
 8 | <Button on:click={toggleMode} variant="outline" size="icon">
 9 | 	<Sun
10 | 		class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
11 | 	/>
12 | 	<Moon
13 | 		class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
14 | 	/>
15 | 	<span class="sr-only">Toggle theme</span>
16 | </Button>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/policy/CookieBanner.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import * as AlertDialog from '$lib/components/ui/alert-dialog/index';
 3 | 	import { onMount } from 'svelte';
 4 | 	import Button from '../ui/button/button.svelte';
 5 | 	let showCookieBanner = false;
 6 | 
 7 | 	onMount(() => {
 8 | 		const state = localStorage.getItem('accepted-cookies');
 9 | 		if (!state) {
10 | 			showCookieBanner = true;
11 | 		}
12 | 	});
13 | 
14 | 	function onAccept() {
15 | 		localStorage.setItem('accepted-cookies', 'ACCEPTED');
16 | 		showCookieBanner = false;
17 | 	}
18 | 	function onDecline() {
19 | 		localStorage.setItem('accepted-cookies', 'DECLINED');
20 | 		showCookieBanner = false;
21 | 	}
22 | </script>
23 | 
24 | <AlertDialog.Root bind:open={showCookieBanner}>
25 | 	<AlertDialog.Content>
26 | 		<AlertDialog.Header>
27 | 			<AlertDialog.Title>We are using cookies</AlertDialog.Title>
28 | 			<AlertDialog.Description>
29 | 				We are using cookies to improve the user experience and keep track of user sessions if the
30 | 				login. By using this website, you agree to our use of cookies.
31 | 			</AlertDialog.Description>
32 | 		</AlertDialog.Header>
33 | 		<AlertDialog.Footer>
34 | 			<Button on:click={onAccept} size="sm">Accept all</Button>
35 | 			<Button on:click={onDecline} variant="outline" size="sm">Decline all</Button>
36 | 		</AlertDialog.Footer>
37 | 	</AlertDialog.Content>
38 | </AlertDialog.Root>
39 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/accordion/accordion-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Accordion as AccordionPrimitive } from "bits-ui";
 3 | 	import { slide } from "svelte/transition";
 4 | 	import { cn } from "$lib/utils.js";
 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 | 	export { className as class };
14 | </script>
15 | 
16 | <AccordionPrimitive.Content
17 | 	class={cn("overflow-hidden text-sm transition-all", className)}
18 | 	{transition}
19 | 	{transitionConfig}
20 | 	{...$$restProps}
21 | >
22 | 	<div class="pb-4 pt-0">
23 | 		<slot />
24 | 	</div>
25 | </AccordionPrimitive.Content>
26 | 


--------------------------------------------------------------------------------
/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.js";
 4 | 
 5 | 	type $$Props = AccordionPrimitive.ItemProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let value: $$Props["value"];
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <AccordionPrimitive.Item {value} class={cn("border-b", className)} {...$$restProps}>
13 | 	<slot />
14 | </AccordionPrimitive.Item>
15 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/accordion/accordion-trigger.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Accordion as AccordionPrimitive } from "bits-ui";
 3 | 	import ChevronDown from "lucide-svelte/icons/chevron-down";
 4 | 	import { cn } from "$lib/utils.js";
 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 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 class="h-4 w-4 transition-transform duration-200" />
25 | 	</AccordionPrimitive.Trigger>
26 | </AccordionPrimitive.Header>
27 | 


--------------------------------------------------------------------------------
/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 | const Root = AccordionPrimitive.Root;
 6 | 
 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/index.js";
 4 | 	import { cn } from "$lib/utils.js";
 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/index.js";
 4 | 	import { cn } from "$lib/utils.js";
 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(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
15 | 	{...$$restProps}
16 | 	on:click
17 | 	on:keydown
18 | 	let:builder
19 | >
20 | 	<slot {builder} />
21 | </AlertDialogPrimitive.Cancel>
22 | 


--------------------------------------------------------------------------------
/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 "./index.js";
 4 | 	import { cn, flyAndScale } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = AlertDialogPrimitive.ContentProps;
 7 | 
 8 | 	export let transition: $$Props["transition"] = flyAndScale;
 9 | 	export let transitionConfig: $$Props["transitionConfig"] = undefined;
10 | 
11 | 	let className: $$Props["class"] = undefined;
12 | 	export { className as class };
13 | </script>
14 | 
15 | <AlertDialog.Portal>
16 | 	<AlertDialog.Overlay />
17 | 	<AlertDialogPrimitive.Content
18 | 		{transition}
19 | 		{transitionConfig}
20 | 		class={cn(
21 | 			"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",
22 | 			className
23 | 		)}
24 | 		{...$$restProps}
25 | 	>
26 | 		<slot />
27 | 	</AlertDialogPrimitive.Content>
28 | </AlertDialog.Portal>
29 | 


--------------------------------------------------------------------------------
/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.js";
 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 type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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-2 text-center sm:text-left", className)} {...$$restProps}>
12 | 	<slot />
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 3 | 	import { fade } from "svelte/transition";
 4 | 	import { cn } from "$lib/utils.js";
 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("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)}
20 | 	{...$$restProps}
21 | />
22 | 


--------------------------------------------------------------------------------
/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.js";
 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 class={cn("text-lg font-semibold", className)} {level} {...$$restProps}>
13 | 	<slot />
14 | </AlertDialogPrimitive.Title>
15 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert-dialog/index.ts:
--------------------------------------------------------------------------------
 1 | import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 2 | 
 3 | import Title from "./alert-dialog-title.svelte";
 4 | import Action from "./alert-dialog-action.svelte";
 5 | import Cancel from "./alert-dialog-cancel.svelte";
 6 | import Portal from "./alert-dialog-portal.svelte";
 7 | import Footer from "./alert-dialog-footer.svelte";
 8 | import Header from "./alert-dialog-header.svelte";
 9 | import Overlay from "./alert-dialog-overlay.svelte";
10 | import Content from "./alert-dialog-content.svelte";
11 | import Description from "./alert-dialog-description.svelte";
12 | 
13 | const Root = AlertDialogPrimitive.Root;
14 | const Trigger = AlertDialogPrimitive.Trigger;
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 type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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 type { HTMLAttributes } from "svelte/elements";
 3 | 	import type { HeadingLevel } from "./index.js";
 4 | 	import { cn } from "$lib/utils.js";
 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 type { HTMLAttributes } from "svelte/elements";
 3 | 	import { type Variant, alertVariants } from "./index.js";
 4 | 	import { cn } from "$lib/utils.js";
 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 class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
16 | 	<slot />
17 | </div>
18 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/alert/index.ts:
--------------------------------------------------------------------------------
 1 | import { type VariantProps, tv } 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 p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
 9 | 
10 | 	variants: {
11 | 		variant: {
12 | 			default: "bg-background text-foreground",
13 | 			destructive:
14 | 				"border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive",
15 | 		},
16 | 	},
17 | 	defaultVariants: {
18 | 		variant: "default",
19 | 	},
20 | });
21 | 
22 | export type Variant = VariantProps<typeof alertVariants>["variant"];
23 | export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
24 | 
25 | export {
26 | 	Root,
27 | 	Description,
28 | 	Title,
29 | 	//
30 | 	Root as Alert,
31 | 	Description as AlertDescription,
32 | 	Title as AlertTitle,
33 | };
34 | 


--------------------------------------------------------------------------------
/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.js";
 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("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </AvatarPrimitive.Fallback>
17 | 


--------------------------------------------------------------------------------
/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.js";
 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.js";
 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("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
15 | 	{...$$restProps}
16 | >
17 | 	<slot />
18 | </AvatarPrimitive.Root>
19 | 


--------------------------------------------------------------------------------
/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 { type Variant, badgeVariants } from "./index.js";
 3 | 	import { cn } from "$lib/utils.js";
 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 { type VariantProps, tv } from "tailwind-variants";
 2 | export { default as Badge } from "./badge.svelte";
 3 | 
 4 | export const badgeVariants = tv({
 5 | 	base: "inline-flex select-none items-center rounded-full 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",
 6 | 	variants: {
 7 | 		variant: {
 8 | 			default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
 9 | 			secondary:
10 | 				"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
11 | 			destructive:
12 | 				"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
13 | 			outline: "text-foreground",
14 | 		},
15 | 	},
16 | 	defaultVariants: {
17 | 		variant: "default",
18 | 	},
19 | });
20 | 
21 | export type Variant = VariantProps<typeof badgeVariants>["variant"];
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import Ellipsis from "lucide-svelte/icons/ellipsis";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = HTMLAttributes<HTMLSpanElement> & {
 7 | 		el?: HTMLSpanElement;
 8 | 	};
 9 | 
10 | 	export let el: $$Props["el"] = undefined;
11 | 	let className: $$Props["class"] = undefined;
12 | 	export { className as class };
13 | </script>
14 | 
15 | <span
16 | 	bind:this={el}
17 | 	role="presentation"
18 | 	aria-hidden="true"
19 | 	class={cn("flex h-9 w-9 items-center justify-center", className)}
20 | 	{...$$restProps}
21 | >
22 | 	<Ellipsis class="h-4 w-4" />
23 | 	<span class="sr-only">More</span>
24 | </span>
25 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLLiAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLLiAttributes & {
 6 | 		el?: HTMLLIElement;
 7 | 	};
 8 | 
 9 | 	export let el: $$Props["el"] = undefined;
10 | 	let className: $$Props["class"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <li bind:this={el} class={cn("inline-flex items-center gap-1.5", className)}>
15 | 	<slot />
16 | </li>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAnchorAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAnchorAttributes & {
 6 | 		el?: HTMLAnchorElement;
 7 | 		asChild?: boolean;
 8 | 	};
 9 | 
10 | 	export let href: $$Props["href"] = undefined;
11 | 	export let el: $$Props["el"] = undefined;
12 | 	export let asChild: $$Props["asChild"] = false;
13 | 	let className: $$Props["class"] = undefined;
14 | 	export { className as class };
15 | 
16 | 	let attrs: Record<string, unknown>;
17 | 
18 | 	$: attrs = {
19 | 		class: cn("transition-colors hover:text-foreground", className),
20 | 		href,
21 | 		...$$restProps,
22 | 	};
23 | </script>
24 | 
25 | {#if asChild}
26 | 	<slot {attrs} />
27 | {:else}
28 | 	<a bind:this={el} {...attrs} {href}>
29 | 		<slot {attrs} />
30 | 	</a>
31 | {/if}
32 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLOlAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLOlAttributes & {
 6 | 		el?: HTMLOListElement;
 7 | 	};
 8 | 
 9 | 	export let el: $$Props["el"] = undefined;
10 | 	let className: $$Props["class"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <ol
15 | 	bind:this={el}
16 | 	class={cn(
17 | 		"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
18 | 		className
19 | 	)}
20 | 	{...$$restProps}
21 | >
22 | 	<slot />
23 | </ol>
24 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLSpanElement> & {
 6 | 		el?: HTMLSpanElement;
 7 | 	};
 8 | 
 9 | 	export let el: $$Props["el"] = undefined;
10 | 	export let className: $$Props["class"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <span
15 | 	bind:this={el}
16 | 	role="link"
17 | 	aria-disabled="true"
18 | 	aria-current="page"
19 | 	class={cn("font-normal text-foreground", className)}
20 | 	{...$$restProps}
21 | >
22 | 	<slot />
23 | </span>
24 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLLiAttributes } from "svelte/elements";
 3 | 	import ChevronRight from "lucide-svelte/icons/chevron-right";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = HTMLLiAttributes & {
 7 | 		el?: HTMLLIElement;
 8 | 	};
 9 | 
10 | 	export let el: $$Props["el"] = undefined;
11 | 	let className: $$Props["class"] = undefined;
12 | 	export { className as class };
13 | </script>
14 | 
15 | <li
16 | 	role="presentation"
17 | 	aria-hidden="true"
18 | 	class={cn("[&>svg]:size-3.5", className)}
19 | 	bind:this={el}
20 | 	{...$$restProps}
21 | >
22 | 	<slot>
23 | 		<ChevronRight />
24 | 	</slot>
25 | </li>
26 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/breadcrumb/breadcrumb.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 
 4 | 	type $$Props = HTMLAttributes<HTMLElement> & {
 5 | 		el?: HTMLElement;
 6 | 	};
 7 | 
 8 | 	export let el: $$Props["el"] = undefined;
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <nav class={className} bind:this={el} aria-label="breadcrumb" {...$$restProps}>
14 | 	<slot />
15 | </nav>
16 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/breadcrumb/index.ts:
--------------------------------------------------------------------------------
 1 | import Root from "./breadcrumb.svelte";
 2 | import Ellipsis from "./breadcrumb-ellipsis.svelte";
 3 | import Item from "./breadcrumb-item.svelte";
 4 | import Separator from "./breadcrumb-separator.svelte";
 5 | import Link from "./breadcrumb-link.svelte";
 6 | import List from "./breadcrumb-list.svelte";
 7 | import Page from "./breadcrumb-page.svelte";
 8 | 
 9 | export {
10 | 	Root,
11 | 	Ellipsis,
12 | 	Item,
13 | 	Separator,
14 | 	Link,
15 | 	List,
16 | 	Page,
17 | 	//
18 | 	Root as Breadcrumb,
19 | 	Ellipsis as BreadcrumbEllipsis,
20 | 	Item as BreadcrumbItem,
21 | 	Separator as BreadcrumbSeparator,
22 | 	Link as BreadcrumbLink,
23 | 	List as BreadcrumbList,
24 | 	Page as BreadcrumbPage,
25 | };
26 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/button/button.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Button as ButtonPrimitive } from "bits-ui";
 3 | 	import { type Events, type Props, buttonVariants } from "./index.js";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = Props;
 7 | 	type $$Events = Events;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let variant: $$Props["variant"] = "default";
11 | 	export let size: $$Props["size"] = "default";
12 | 	export let builders: $$Props["builders"] = [];
13 | 	export { className as class };
14 | </script>
15 | 
16 | <ButtonPrimitive.Root
17 | 	{builders}
18 | 	class={cn(buttonVariants({ variant, size, className }))}
19 | 	type="button"
20 | 	{...$$restProps}
21 | 	on:click
22 | 	on:keydown
23 | >
24 | 	<slot />
25 | </ButtonPrimitive.Root>
26 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/button/index.ts:
--------------------------------------------------------------------------------
 1 | import { type VariantProps, tv } from "tailwind-variants";
 2 | import type { Button as ButtonPrimitive } from "bits-ui";
 3 | import Root from "./button.svelte";
 4 | 
 5 | const buttonVariants = tv({
 6 | 	base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 7 | 	variants: {
 8 | 		variant: {
 9 | 			default: "bg-primary text-primary-foreground hover:bg-primary/90",
10 | 			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
11 | 			outline:
12 | 				"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
13 | 			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
14 | 			ghost: "hover:bg-accent hover:text-accent-foreground",
15 | 			link: "text-primary underline-offset-4 hover:underline",
16 | 		},
17 | 		size: {
18 | 			default: "h-10 px-4 py-2",
19 | 			sm: "h-9 rounded-md px-3",
20 | 			lg: "h-11 rounded-md px-8",
21 | 			icon: "h-10 w-10",
22 | 		},
23 | 	},
24 | 	defaultVariants: {
25 | 		variant: "default",
26 | 		size: "default",
27 | 	},
28 | });
29 | 
30 | type Variant = VariantProps<typeof buttonVariants>["variant"];
31 | type Size = VariantProps<typeof buttonVariants>["size"];
32 | 
33 | type Props = ButtonPrimitive.Props & {
34 | 	variant?: Variant;
35 | 	size?: Size;
36 | };
37 | 
38 | type Events = ButtonPrimitive.Events;
39 | 
40 | export {
41 | 	Root,
42 | 	type Props,
43 | 	type Events,
44 | 	//
45 | 	Root as Button,
46 | 	type Props as ButtonProps,
47 | 	type Events as ButtonEvents,
48 | 	buttonVariants,
49 | };
50 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/calendar/calendar-cell.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Calendar as CalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = CalendarPrimitive.CellProps;
 6 | 
 7 | 	export let date: $$Props["date"];
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <CalendarPrimitive.Cell
13 | 	{date}
14 | 	class={cn(
15 | 		"relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50",
16 | 		className
17 | 	)}
18 | 	{...$$restProps}
19 | >
20 | 	<slot />
21 | </CalendarPrimitive.Cell>
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/calendar/calendar-day.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Calendar as CalendarPrimitive } from "bits-ui";
 3 | 	import { buttonVariants } from "$lib/components/ui/button/index.js";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = CalendarPrimitive.DayProps;
 7 | 	type $$Events = CalendarPrimitive.DayEvents;
 8 | 
 9 | 	export let date: $$Props["date"];
10 | 	export let month: $$Props["month"];
11 | 	let className: $$Props["class"] = undefined;
12 | 	export { className as class };
13 | </script>
14 | 
15 | <CalendarPrimitive.Day
16 | 	on:click
17 | 	{date}
18 | 	{month}
19 | 	class={cn(
20 | 		buttonVariants({ variant: "ghost" }),
21 | 		"h-9 w-9 p-0 font-normal ",
22 | 		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
23 | 		// Selected
24 | 		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground",
25 | 		// Disabled
26 | 		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
27 | 		// Unavailable
28 | 		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
29 | 		// Outside months
30 | 		"data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30",
31 | 		className
32 | 	)}
33 | 	{...$$restProps}
34 | 	let:selected
35 | 	let:disabled
36 | 	let:unavailable
37 | 	let:builder
38 | >
39 | 	<slot {selected} {disabled} {unavailable} {builder}>
40 | 		{date.day}
41 | 	</slot>
42 | </CalendarPrimitive.Day>
43 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/calendar/calendar-grid-body.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Calendar as CalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = CalendarPrimitive.GridBodyProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <CalendarPrimitive.GridBody class={cn(className)} {...$$restProps}>
12 | 	<slot />
13 | </CalendarPrimitive.GridBody>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/calendar/calendar-grid-head.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Calendar as CalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = CalendarPrimitive.GridHeadProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <CalendarPrimitive.GridHead class={cn(className)} {...$$restProps}>
12 | 	<slot />
13 | </CalendarPrimitive.GridHead>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/calendar/calendar-grid-row.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Calendar as CalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = CalendarPrimitive.GridRowProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <CalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
12 | 	<slot />
13 | </CalendarPrimitive.GridRow>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/calendar/calendar-grid.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Calendar as CalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = CalendarPrimitive.GridProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <CalendarPrimitive.Grid class={cn("w-full border-collapse space-y-1", className)} {...$$restProps}>
12 | 	<slot />
13 | </CalendarPrimitive.Grid>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/calendar/calendar-head-cell.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Calendar as CalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = CalendarPrimitive.HeadCellProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <CalendarPrimitive.HeadCell
12 | 	class={cn("w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </CalendarPrimitive.HeadCell>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/calendar/calendar-header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Calendar as CalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = CalendarPrimitive.HeaderProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <CalendarPrimitive.Header
12 | 	class={cn("relative flex w-full items-center justify-between pt-1", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </CalendarPrimitive.Header>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/calendar/calendar-heading.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Calendar as CalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = CalendarPrimitive.HeadingProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <CalendarPrimitive.Heading
12 | 	let:headingValue
13 | 	class={cn("text-sm font-medium", className)}
14 | 	{...$$restProps}
15 | >
16 | 	<slot {headingValue}>
17 | 		{headingValue}
18 | 	</slot>
19 | </CalendarPrimitive.Heading>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/calendar/calendar-months.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/calendar/calendar-next-button.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Calendar as CalendarPrimitive } from "bits-ui";
 3 | 	import ChevronRight from "lucide-svelte/icons/chevron-right";
 4 | 	import { buttonVariants } from "$lib/components/ui/button/index.js";
 5 | 	import { cn } from "$lib/utils.js";
 6 | 
 7 | 	type $$Props = CalendarPrimitive.NextButtonProps;
 8 | 	type $$Events = CalendarPrimitive.NextButtonEvents;
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <CalendarPrimitive.NextButton
15 | 	on:click
16 | 	class={cn(
17 | 		buttonVariants({ variant: "outline" }),
18 | 		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
19 | 		className
20 | 	)}
21 | 	{...$$restProps}
22 | 	let:builder
23 | >
24 | 	<slot {builder}>
25 | 		<ChevronRight class="h-4 w-4" />
26 | 	</slot>
27 | </CalendarPrimitive.NextButton>
28 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/calendar/calendar-prev-button.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Calendar as CalendarPrimitive } from "bits-ui";
 3 | 	import ChevronLeft from "lucide-svelte/icons/chevron-left";
 4 | 	import { buttonVariants } from "$lib/components/ui/button/index.js";
 5 | 	import { cn } from "$lib/utils.js";
 6 | 
 7 | 	type $$Props = CalendarPrimitive.PrevButtonProps;
 8 | 	type $$Events = CalendarPrimitive.PrevButtonEvents;
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <CalendarPrimitive.PrevButton
15 | 	on:click
16 | 	class={cn(
17 | 		buttonVariants({ variant: "outline" }),
18 | 		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
19 | 		className
20 | 	)}
21 | 	{...$$restProps}
22 | 	let:builder
23 | >
24 | 	<slot {builder}>
25 | 		<ChevronLeft class="h-4 w-4" />
26 | 	</slot>
27 | </CalendarPrimitive.PrevButton>
28 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/calendar/calendar.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Calendar as CalendarPrimitive } from "bits-ui";
 3 | 	import * as Calendar from "./index.js";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = CalendarPrimitive.Props;
 7 | 
 8 | 	type $$Events = CalendarPrimitive.Events;
 9 | 
10 | 	export let value: $$Props["value"] = undefined;
11 | 	export let placeholder: $$Props["placeholder"] = undefined;
12 | 	export let weekdayFormat: $$Props["weekdayFormat"] = "short";
13 | 
14 | 	let className: $$Props["class"] = undefined;
15 | 	export { className as class };
16 | </script>
17 | 
18 | <CalendarPrimitive.Root
19 | 	bind:value
20 | 	bind:placeholder
21 | 	{weekdayFormat}
22 | 	class={cn("p-3", className)}
23 | 	{...$$restProps}
24 | 	on:keydown
25 | 	let:months
26 | 	let:weekdays
27 | >
28 | 	<Calendar.Header>
29 | 		<Calendar.PrevButton />
30 | 		<Calendar.Heading />
31 | 		<Calendar.NextButton />
32 | 	</Calendar.Header>
33 | 	<Calendar.Months>
34 | 		{#each months as month}
35 | 			<Calendar.Grid>
36 | 				<Calendar.GridHead>
37 | 					<Calendar.GridRow class="flex">
38 | 						{#each weekdays as weekday}
39 | 							<Calendar.HeadCell>
40 | 								{weekday.slice(0, 2)}
41 | 							</Calendar.HeadCell>
42 | 						{/each}
43 | 					</Calendar.GridRow>
44 | 				</Calendar.GridHead>
45 | 				<Calendar.GridBody>
46 | 					{#each month.weeks as weekDates}
47 | 						<Calendar.GridRow class="mt-2 w-full">
48 | 							{#each weekDates as date}
49 | 								<Calendar.Cell {date}>
50 | 									<Calendar.Day {date} month={month.value} />
51 | 								</Calendar.Cell>
52 | 							{/each}
53 | 						</Calendar.GridRow>
54 | 					{/each}
55 | 				</Calendar.GridBody>
56 | 			</Calendar.Grid>
57 | 		{/each}
58 | 	</Calendar.Months>
59 | </CalendarPrimitive.Root>
60 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/calendar/index.ts:
--------------------------------------------------------------------------------
 1 | import Root from "./calendar.svelte";
 2 | import Cell from "./calendar-cell.svelte";
 3 | import Day from "./calendar-day.svelte";
 4 | import Grid from "./calendar-grid.svelte";
 5 | import Header from "./calendar-header.svelte";
 6 | import Months from "./calendar-months.svelte";
 7 | import GridRow from "./calendar-grid-row.svelte";
 8 | import Heading from "./calendar-heading.svelte";
 9 | import GridBody from "./calendar-grid-body.svelte";
10 | import GridHead from "./calendar-grid-head.svelte";
11 | import HeadCell from "./calendar-head-cell.svelte";
12 | import NextButton from "./calendar-next-button.svelte";
13 | import PrevButton from "./calendar-prev-button.svelte";
14 | 
15 | export {
16 | 	Day,
17 | 	Cell,
18 | 	Grid,
19 | 	Header,
20 | 	Months,
21 | 	GridRow,
22 | 	Heading,
23 | 	GridBody,
24 | 	GridHead,
25 | 	HeadCell,
26 | 	NextButton,
27 | 	PrevButton,
28 | 	//
29 | 	Root as Calendar,
30 | };
31 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/card/card-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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.js";
 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.js";
 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.js";
 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 type { HeadingLevel } from "./index.js";
 4 | 	import { cn } from "$lib/utils.js";
 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("text-lg 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.js";
 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("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </div>
17 | 


--------------------------------------------------------------------------------
/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/carousel/carousel-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import emblaCarouselSvelte from "embla-carousel-svelte";
 4 | 	import { getEmblaContext } from "./context.js";
 5 | 	import { cn } from "$lib/utils.js";
 6 | 
 7 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 8 | 
 9 | 	let className: string | undefined | null = undefined;
10 | 	export { className as class };
11 | 
12 | 	const { orientation, options, plugins, onInit } = getEmblaContext("<Carousel.Content/>");
13 | </script>
14 | 
15 | <div
16 | 	class="overflow-hidden"
17 | 	use:emblaCarouselSvelte={{
18 | 		options: {
19 | 			container: "[data-embla-container]",
20 | 			slides: "[data-embla-slide]",
21 | 			...$options,
22 | 			axis: $orientation === "horizontal" ? "x" : "y",
23 | 		},
24 | 		plugins: $plugins,
25 | 	}}
26 | 	on:emblaInit={onInit}
27 | >
28 | 	<div
29 | 		class={cn("flex", $orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
30 | 		data-embla-container=""
31 | 		{...$$restProps}
32 | 	>
33 | 		<slot />
34 | 	</div>
35 | </div>
36 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/carousel/carousel-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { getEmblaContext } from "./context.js";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 7 | 	let className: string | undefined | null = undefined;
 8 | 	export { className as class };
 9 | 
10 | 	const { orientation } = getEmblaContext("<Carousel.Item/>");
11 | </script>
12 | 
13 | <div
14 | 	role="group"
15 | 	aria-roledescription="slide"
16 | 	class={cn(
17 | 		"min-w-0 shrink-0 grow-0 basis-full",
18 | 		$orientation === "horizontal" ? "pl-4" : "pt-4",
19 | 		className
20 | 	)}
21 | 	data-embla-slide=""
22 | 	{...$$restProps}
23 | >
24 | 	<slot />
25 | </div>
26 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/carousel/carousel-next.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import ArrowRight from "lucide-svelte/icons/arrow-right";
 3 | 	import type { VariantProps } from "tailwind-variants";
 4 | 	import { getEmblaContext } from "./context.js";
 5 | 	import { cn } from "$lib/utils.js";
 6 | 	import {
 7 | 		Button,
 8 | 		type Props,
 9 | 		type buttonVariants,
10 | 	} from "$lib/components/ui/button/index.js";
11 | 
12 | 	type $$Props = Props;
13 | 
14 | 	let className: $$Props["class"] = undefined;
15 | 	export { className as class };
16 | 	export let variant: VariantProps<typeof buttonVariants>["variant"] = "outline";
17 | 	export let size: VariantProps<typeof buttonVariants>["size"] = "icon";
18 | 	const { orientation, canScrollNext, scrollNext, handleKeyDown } =
19 | 		getEmblaContext("<Carousel.Next/>");
20 | </script>
21 | 
22 | <Button
23 | 	{variant}
24 | 	{size}
25 | 	class={cn(
26 | 		"absolute h-8 w-8 touch-manipulation rounded-full",
27 | 		$orientation === "horizontal"
28 | 			? "-right-12 top-1/2 -translate-y-1/2"
29 | 			: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
30 | 		className
31 | 	)}
32 | 	disabled={!$canScrollNext}
33 | 	on:click={scrollNext}
34 | 	on:keydown={handleKeyDown}
35 | 	{...$$restProps}
36 | >
37 | 	<ArrowRight class="h-4 w-4" />
38 | 	<span class="sr-only">Next slide</span>
39 | </Button>
40 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/carousel/carousel-previous.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import ArrowLeft from "lucide-svelte/icons/arrow-left";
 3 | 	import type { VariantProps } from "tailwind-variants";
 4 | 	import { getEmblaContext } from "./context.js";
 5 | 	import { cn } from "$lib/utils.js";
 6 | 	import {
 7 | 		Button,
 8 | 		type Props,
 9 | 		type buttonVariants,
10 | 	} from "$lib/components/ui/button/index.js";
11 | 
12 | 	type $$Props = Props;
13 | 
14 | 	let className: $$Props["class"] = undefined;
15 | 	export { className as class };
16 | 	export let variant: VariantProps<typeof buttonVariants>["variant"] = "outline";
17 | 	export let size: VariantProps<typeof buttonVariants>["size"] = "icon";
18 | 
19 | 	const { orientation, canScrollPrev, scrollPrev, handleKeyDown } =
20 | 		getEmblaContext("<Carousel.Previous/>");
21 | </script>
22 | 
23 | <Button
24 | 	{variant}
25 | 	{size}
26 | 	class={cn(
27 | 		"absolute h-8 w-8 touch-manipulation rounded-full",
28 | 		$orientation === "horizontal"
29 | 			? "-left-12 top-1/2 -translate-y-1/2"
30 | 			: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
31 | 		className
32 | 	)}
33 | 	disabled={!$canScrollPrev}
34 | 	on:click={scrollPrev}
35 | 	on:keydown={handleKeyDown}
36 | 	{...$$restProps}
37 | >
38 | 	<ArrowLeft class="h-4 w-4" />
39 | 	<span class="sr-only">Previous slide</span>
40 | </Button>
41 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/carousel/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Root } from "./carousel.svelte";
2 | export { default as Content } from "./carousel-content.svelte";
3 | export { default as Item } from "./carousel-item.svelte";
4 | export { default as Previous } from "./carousel-previous.svelte";
5 | export { default as Next } from "./carousel-next.svelte";
6 | 


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


--------------------------------------------------------------------------------
/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 | 
 5 | 	type $$Props = CollapsiblePrimitive.ContentProps;
 6 | 
 7 | 	export let transition: $$Props["transition"] = slide;
 8 | 	export let transitionConfig: $$Props["transitionConfig"] = {
 9 | 		duration: 150,
10 | 	};
11 | </script>
12 | 
13 | <CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}>
14 | 	<slot />
15 | </CollapsiblePrimitive.Content>
16 | 


--------------------------------------------------------------------------------
/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/command/command-dialog.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { Dialog as DialogPrimitive } from "bits-ui";
 3 | 	import type { Command as CommandPrimitive } from "cmdk-sv";
 4 | 	import Command from "./command.svelte";
 5 | 	import * as Dialog from "$lib/components/ui/dialog/index.js";
 6 | 
 7 | 	type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps;
 8 | 
 9 | 	export let open: $$Props["open"] = false;
10 | 	export let value: $$Props["value"] = undefined;
11 | </script>
12 | 
13 | <Dialog.Root bind:open {...$$restProps}>
14 | 	<Dialog.Content class="overflow-hidden p-0 shadow-lg">
15 | 		<Command
16 | 			class="[&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
17 | 			{...$$restProps}
18 | 			bind:value
19 | 		>
20 | 			<slot />
21 | 		</Command>
22 | 	</Dialog.Content>
23 | </Dialog.Root>
24 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/command/command-empty.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Command as CommandPrimitive } from "cmdk-sv";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = CommandPrimitive.EmptyProps;
 6 | 	let className: string | undefined | null = undefined;
 7 | 	export { className as class };
 8 | </script>
 9 | 
10 | <CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...$$restProps}>
11 | 	<slot />
12 | </CommandPrimitive.Empty>
13 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/command/command-group.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Command as CommandPrimitive } from "cmdk-sv";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 	type $$Props = CommandPrimitive.GroupProps;
 5 | 
 6 | 	let className: string | undefined | null = undefined;
 7 | 	export { className as class };
 8 | </script>
 9 | 
10 | <CommandPrimitive.Group
11 | 	class={cn(
12 | 		"overflow-hidden p-1 text-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground",
13 | 		className
14 | 	)}
15 | 	{...$$restProps}
16 | >
17 | 	<slot />
18 | </CommandPrimitive.Group>
19 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/command/command-input.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Command as CommandPrimitive } from "cmdk-sv";
 3 | 	import Search from "lucide-svelte/icons/search";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = CommandPrimitive.InputProps;
 7 | 
 8 | 	let className: string | undefined | null = undefined;
 9 | 	export { className as class };
10 | 	export let value: string = "";
11 | </script>
12 | 
13 | <div class="flex items-center border-b px-2" data-cmdk-input-wrapper="">
14 | 	<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
15 | 	<CommandPrimitive.Input
16 | 		class={cn(
17 | 			"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
18 | 			className
19 | 		)}
20 | 		{...$$restProps}
21 | 		bind:value
22 | 	/>
23 | </div>
24 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/command/command-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Command as CommandPrimitive } from "cmdk-sv";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = CommandPrimitive.ItemProps;
 6 | 
 7 | 	export let asChild = false;
 8 | 
 9 | 	let className: string | undefined | null = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <CommandPrimitive.Item
14 | 	{asChild}
15 | 	class={cn(
16 | 		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
17 | 		className
18 | 	)}
19 | 	{...$$restProps}
20 | 	let:action
21 | 	let:attrs
22 | >
23 | 	<slot {action} {attrs} />
24 | </CommandPrimitive.Item>
25 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/command/command-list.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Command as CommandPrimitive } from "cmdk-sv";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = CommandPrimitive.ListProps;
 6 | 	let className: string | undefined | null = undefined;
 7 | 	export { className as class };
 8 | </script>
 9 | 
10 | <CommandPrimitive.List
11 | 	class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
12 | 	{...$$restProps}
13 | >
14 | 	<slot />
15 | </CommandPrimitive.List>
16 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/command/command-separator.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Command as CommandPrimitive } from "cmdk-sv";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = CommandPrimitive.SeparatorProps;
 6 | 	let className: string | undefined | null = undefined;
 7 | 	export { className as class };
 8 | </script>
 9 | 
10 | <CommandPrimitive.Separator class={cn("-mx-1 h-px bg-border", className)} {...$$restProps} />
11 | 


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


--------------------------------------------------------------------------------
/src/lib/components/ui/command/command.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Command as CommandPrimitive } from "cmdk-sv";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = CommandPrimitive.CommandProps;
 6 | 
 7 | 	export let value: $$Props["value"] = undefined;
 8 | 
 9 | 	let className: string | undefined | null = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <CommandPrimitive.Root
14 | 	class={cn(
15 | 		"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
16 | 		className
17 | 	)}
18 | 	bind:value
19 | 	{...$$restProps}
20 | >
21 | 	<slot />
22 | </CommandPrimitive.Root>
23 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/command/index.ts:
--------------------------------------------------------------------------------
 1 | import { Command as CommandPrimitive } from "cmdk-sv";
 2 | 
 3 | import Root from "./command.svelte";
 4 | import Dialog from "./command-dialog.svelte";
 5 | import Empty from "./command-empty.svelte";
 6 | import Group from "./command-group.svelte";
 7 | import Item from "./command-item.svelte";
 8 | import Input from "./command-input.svelte";
 9 | import List from "./command-list.svelte";
10 | import Separator from "./command-separator.svelte";
11 | import Shortcut from "./command-shortcut.svelte";
12 | 
13 | const Loading = CommandPrimitive.Loading;
14 | 
15 | export {
16 | 	Root,
17 | 	Dialog,
18 | 	Empty,
19 | 	Group,
20 | 	Item,
21 | 	Input,
22 | 	List,
23 | 	Separator,
24 | 	Shortcut,
25 | 	Loading,
26 | 	//
27 | 	Root as Command,
28 | 	Dialog as CommandDialog,
29 | 	Empty as CommandEmpty,
30 | 	Group as CommandGroup,
31 | 	Item as CommandItem,
32 | 	Input as CommandInput,
33 | 	List as CommandList,
34 | 	Separator as CommandSeparator,
35 | 	Shortcut as CommandShortcut,
36 | 	Loading as CommandLoading,
37 | };
38 | 


--------------------------------------------------------------------------------
/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 Check from "lucide-svelte/icons/check";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = ContextMenuPrimitive.CheckboxItemProps;
 7 | 	type $$Events = ContextMenuPrimitive.CheckboxItemEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let checked: $$Props["checked"] = undefined;
11 | 	export { className as class };
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-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground 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.js";
 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.js";
 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-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground 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.js";
 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("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
16 | 	{...$$restProps}
17 | >
18 | 	<slot />
19 | </ContextMenuPrimitive.Label>
20 | 


--------------------------------------------------------------------------------
/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 Circle from "lucide-svelte/icons/circle";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = ContextMenuPrimitive.RadioItemProps;
 7 | 	type $$Events = ContextMenuPrimitive.RadioItemEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let value: ContextMenuPrimitive.RadioItemProps["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-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground 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 | 			<Circle class="h-2 w-2 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.js";
 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 type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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 text-muted-foreground", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </span>
17 | 


--------------------------------------------------------------------------------
/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.js";
 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"] = {
10 | 		x: -10,
11 | 		y: 0,
12 | 	};
13 | 	export { className as class };
14 | </script>
15 | 
16 | <ContextMenuPrimitive.SubContent
17 | 	{transition}
18 | 	{transitionConfig}
19 | 	class={cn(
20 | 		"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
21 | 		className
22 | 	)}
23 | 	{...$$restProps}
24 | 	on:keydown
25 | 	on:focusout
26 | 	on:pointermove
27 | >
28 | 	<slot />
29 | </ContextMenuPrimitive.SubContent>
30 | 


--------------------------------------------------------------------------------
/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 ChevronRight from "lucide-svelte/icons/chevron-right";
 4 | 	import { cn } from "$lib/utils.js";
 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-[state=open]:bg-accent data-[highlighted]:text-accent-foreground 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 X from "lucide-svelte/icons/x";
 4 | 	import * as Dialog from "./index.js";
 5 | 	import { cn, flyAndScale } from "$lib/utils.js";
 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 | 			<X 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.js";
 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 type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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 text-center sm:text-left", className)} {...$$restProps}>
12 | 	<slot />
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-overlay.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
 3 | 	import { fade } from "svelte/transition";
 4 | 	import { cn } from "$lib/utils.js";
 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("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm", className)}
20 | 	{...$$restProps}
21 | />
22 | 


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


--------------------------------------------------------------------------------
/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.js";
 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 | import Title from "./dialog-title.svelte";
 4 | import Portal from "./dialog-portal.svelte";
 5 | import Footer from "./dialog-footer.svelte";
 6 | import Header from "./dialog-header.svelte";
 7 | import Overlay from "./dialog-overlay.svelte";
 8 | import Content from "./dialog-content.svelte";
 9 | import Description from "./dialog-description.svelte";
10 | 
11 | const Root = DialogPrimitive.Root;
12 | const Trigger = DialogPrimitive.Trigger;
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/drawer/drawer-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Drawer as DrawerPrimitive } from "vaul-svelte";
 3 | 	import DrawerOverlay from "./drawer-overlay.svelte";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = DrawerPrimitive.ContentProps;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <DrawerPrimitive.Portal>
13 | 	<DrawerOverlay />
14 | 	<DrawerPrimitive.Content
15 | 		class={cn(
16 | 			"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
17 | 			className
18 | 		)}
19 | 		{...$$restProps}
20 | 	>
21 | 		<div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
22 | 		<slot />
23 | 	</DrawerPrimitive.Content>
24 | </DrawerPrimitive.Portal>
25 | 


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


--------------------------------------------------------------------------------
/src/lib/components/ui/drawer/drawer-footer.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement> & {
 6 | 		el?: HTMLDivElement;
 7 | 	};
 8 | 
 9 | 	export let el: $$Props["el"] = undefined;
10 | 	let className: $$Props["class"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <div bind:this={el} class={cn("mt-auto flex flex-col gap-2 p-4", className)} {...$$restProps}>
15 | 	<slot />
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/drawer/drawer-header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement> & {
 6 | 		el?: HTMLDivElement;
 7 | 	};
 8 | 	export let el: $$Props["el"] = undefined;
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <div
14 | 	bind:this={el}
15 | 	class={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
16 | 	{...$$restProps}
17 | >
18 | 	<slot />
19 | </div>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/drawer/drawer-nested.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Drawer as DrawerPrimitive } from "vaul-svelte";
 3 | 
 4 | 	type $$Props = DrawerPrimitive.Props;
 5 | 	export let shouldScaleBackground: $$Props["shouldScaleBackground"] = true;
 6 | 	export let open: $$Props["open"] = false;
 7 | 	export let activeSnapPoint: $$Props["activeSnapPoint"] = undefined;
 8 | </script>
 9 | 
10 | <DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
11 | 	<slot />
12 | </DrawerPrimitive.NestedRoot>
13 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/drawer/drawer-overlay.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Drawer as DrawerPrimitive } from "vaul-svelte";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = DrawerPrimitive.OverlayProps;
 6 | 
 7 | 	export let el: $$Props["el"] = undefined;
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <DrawerPrimitive.Overlay
13 | 	bind:el
14 | 	class={cn("fixed inset-0 z-50 bg-black/80", className)}
15 | 	{...$$restProps}
16 | >
17 | 	<slot />
18 | </DrawerPrimitive.Overlay>
19 | 


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


--------------------------------------------------------------------------------
/src/lib/components/ui/drawer/drawer.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Drawer as DrawerPrimitive } from "vaul-svelte";
 3 | 
 4 | 	type $$Props = DrawerPrimitive.Props;
 5 | 	export let shouldScaleBackground: $$Props["shouldScaleBackground"] = true;
 6 | 	export let open: $$Props["open"] = false;
 7 | 	export let activeSnapPoint: $$Props["activeSnapPoint"] = undefined;
 8 | </script>
 9 | 
10 | <DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
11 | 	<slot />
12 | </DrawerPrimitive.Root>
13 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/drawer/index.ts:
--------------------------------------------------------------------------------
 1 | import { Drawer as DrawerPrimitive } from "vaul-svelte";
 2 | 
 3 | import Root from "./drawer.svelte";
 4 | import Content from "./drawer-content.svelte";
 5 | import Description from "./drawer-description.svelte";
 6 | import Overlay from "./drawer-overlay.svelte";
 7 | import Footer from "./drawer-footer.svelte";
 8 | import Header from "./drawer-header.svelte";
 9 | import Title from "./drawer-title.svelte";
10 | import NestedRoot from "./drawer-nested.svelte";
11 | 
12 | const Trigger = DrawerPrimitive.Trigger;
13 | const Portal = DrawerPrimitive.Portal;
14 | const Close = DrawerPrimitive.Close;
15 | 
16 | export {
17 | 	Root,
18 | 	NestedRoot,
19 | 	Content,
20 | 	Description,
21 | 	Overlay,
22 | 	Footer,
23 | 	Header,
24 | 	Title,
25 | 	Trigger,
26 | 	Portal,
27 | 	Close,
28 | 
29 | 	//
30 | 	Root as Drawer,
31 | 	NestedRoot as DrawerNestedRoot,
32 | 	Content as DrawerContent,
33 | 	Description as DrawerDescription,
34 | 	Overlay as DrawerOverlay,
35 | 	Footer as DrawerFooter,
36 | 	Header as DrawerHeader,
37 | 	Title as DrawerTitle,
38 | 	Trigger as DrawerTrigger,
39 | 	Portal as DrawerPortal,
40 | 	Close as DrawerClose,
41 | };
42 | 


--------------------------------------------------------------------------------
/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 Check from "lucide-svelte/icons/check";
 4 | 	import { cn } from "$lib/utils.js";
 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-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground 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.js";
 4 | 
 5 | 	type $$Props = DropdownMenuPrimitive.ContentProps;
 6 | 	type $$Events = DropdownMenuPrimitive.ContentEvents;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export let sideOffset: $$Props["sideOffset"] = 4;
10 | 	export let transition: $$Props["transition"] = flyAndScale;
11 | 	export let transitionConfig: $$Props["transitionConfig"] = undefined;
12 | 	export { className as class };
13 | </script>
14 | 
15 | <DropdownMenuPrimitive.Content
16 | 	{transition}
17 | 	{transitionConfig}
18 | 	{sideOffset}
19 | 	class={cn(
20 | 		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
21 | 		className
22 | 	)}
23 | 	{...$$restProps}
24 | 	on:keydown
25 | >
26 | 	<slot />
27 | </DropdownMenuPrimitive.Content>
28 | 


--------------------------------------------------------------------------------
/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.js";
 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-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground 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 | </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.js";
 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 Circle from "lucide-svelte/icons/circle";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = DropdownMenuPrimitive.RadioItemProps;
 7 | 	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let value: $$Props["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-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground 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 | 			<Circle class="h-2 w-2 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.js";
 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 type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...$$restProps}>
12 | 	<slot />
13 | </span>
14 | 


--------------------------------------------------------------------------------
/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.js";
 4 | 
 5 | 	type $$Props = DropdownMenuPrimitive.SubContentProps;
 6 | 	type $$Events = DropdownMenuPrimitive.SubContentEvents;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export let transition: $$Props["transition"] = flyAndScale;
10 | 	export let transitionConfig: $$Props["transitionConfig"] = {
11 | 		x: -10,
12 | 		y: 0,
13 | 	};
14 | 	export { className as class };
15 | </script>
16 | 
17 | <DropdownMenuPrimitive.SubContent
18 | 	{transition}
19 | 	{transitionConfig}
20 | 	class={cn(
21 | 		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
22 | 		className
23 | 	)}
24 | 	{...$$restProps}
25 | 	on:keydown
26 | 	on:focusout
27 | 	on:pointermove
28 | >
29 | 	<slot />
30 | </DropdownMenuPrimitive.SubContent>
31 | 


--------------------------------------------------------------------------------
/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 ChevronRight from "lucide-svelte/icons/chevron-right";
 4 | 	import { cn } from "$lib/utils.js";
 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 data-[highlighted]:text-accent-foreground 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 | </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/index.js";
 3 | 
 4 | 	type $$Props = Button.Props;
 5 | 	type $$Events = Button.Events;
 6 | </script>
 7 | 
 8 | <Button.Root type="submit" on:click on:keydown {...$$restProps}>
 9 | 	<slot />
10 | </Button.Root>
11 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-description.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import * as FormPrimitive from "formsnap";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 	import { cn } from "$lib/utils.js";
 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-sm text-muted-foreground", className)}
13 | 	{...$$restProps}
14 | 	let:descriptionAttrs
15 | >
16 | 	<slot {descriptionAttrs} />
17 | </FormPrimitive.Description>
18 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-element-field.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts" context="module">
 2 | 	import type { FormPathLeaves, SuperForm } from "sveltekit-superforms";
 3 | 	type T = Record<string, unknown>;
 4 | 	type U = FormPathLeaves<T>;
 5 | </script>
 6 | 
 7 | <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
 8 | 	import type { HTMLAttributes } from "svelte/elements";
 9 | 	import * as FormPrimitive from "formsnap";
10 | 	import { cn } from "$lib/utils.js";
11 | 
12 | 	type $$Props = FormPrimitive.ElementFieldProps<T, U> & HTMLAttributes<HTMLElement>;
13 | 
14 | 	export let form: SuperForm<T>;
15 | 	export let name: U;
16 | 
17 | 	let className: $$Props["class"] = undefined;
18 | 	export { className as class };
19 | </script>
20 | 
21 | <FormPrimitive.ElementField {form} {name} let:constraints let:errors let:tainted let:value>
22 | 	<div class={cn("space-y-2", className)}>
23 | 		<slot {constraints} {errors} {tainted} {value} />
24 | 	</div>
25 | </FormPrimitive.ElementField>
26 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-field-errors.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import * as FormPrimitive from "formsnap";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = FormPrimitive.FieldErrorsProps & {
 6 | 		errorClasses?: string | undefined | null;
 7 | 	};
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export { className as class };
11 | 	export let errorClasses: $$Props["class"] = undefined;
12 | </script>
13 | 
14 | <FormPrimitive.FieldErrors
15 | 	class={cn("text-sm font-medium text-destructive", className)}
16 | 	{...$$restProps}
17 | 	let:errors
18 | 	let:fieldErrorsAttrs
19 | 	let:errorAttrs
20 | >
21 | 	<slot {errors} {fieldErrorsAttrs} {errorAttrs}>
22 | 		{#each errors as error}
23 | 			<div {...errorAttrs} class={cn(errorClasses)}>{error}</div>
24 | 		{/each}
25 | 	</slot>
26 | </FormPrimitive.FieldErrors>
27 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-field.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts" context="module">
 2 | 	import type { FormPath, SuperForm } from "sveltekit-superforms";
 3 | 	type T = Record<string, unknown>;
 4 | 	type U = FormPath<T>;
 5 | </script>
 6 | 
 7 | <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
 8 | 	import type { HTMLAttributes } from "svelte/elements";
 9 | 	import * as FormPrimitive from "formsnap";
10 | 	import { cn } from "$lib/utils.js";
11 | 
12 | 	type $$Props = FormPrimitive.FieldProps<T, U> & HTMLAttributes<HTMLElement>;
13 | 
14 | 	export let form: SuperForm<T>;
15 | 	export let name: U;
16 | 
17 | 	let className: $$Props["class"] = undefined;
18 | 	export { className as class };
19 | </script>
20 | 
21 | <FormPrimitive.Field {form} {name} let:constraints let:errors let:tainted let:value>
22 | 	<div class={cn("space-y-2", className)}>
23 | 		<slot {constraints} {errors} {tainted} {value} />
24 | 	</div>
25 | </FormPrimitive.Field>
26 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-fieldset.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts" context="module">
 2 | 	import type { FormPath, SuperForm } from "sveltekit-superforms";
 3 | 	type T = Record<string, unknown>;
 4 | 	type U = FormPath<T>;
 5 | </script>
 6 | 
 7 | <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
 8 | 	import * as FormPrimitive from "formsnap";
 9 | 	import { cn } from "$lib/utils.js";
10 | 
11 | 	type $$Props = FormPrimitive.FieldsetProps<T, U>;
12 | 
13 | 	export let form: SuperForm<T>;
14 | 	export let name: U;
15 | 
16 | 	let className: $$Props["class"] = undefined;
17 | 	export { className as class };
18 | </script>
19 | 
20 | <FormPrimitive.Fieldset
21 | 	{form}
22 | 	{name}
23 | 	let:constraints
24 | 	let:errors
25 | 	let:tainted
26 | 	let:value
27 | 	class={cn("space-y-2", className)}
28 | >
29 | 	<slot {constraints} {errors} {tainted} {value} />
30 | </FormPrimitive.Fieldset>
31 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-label.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { Label as LabelPrimitive } from "bits-ui";
 3 | 	import { getFormControl } from "formsnap";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 	import { Label } from "$lib/components/ui/label/index.js";
 6 | 
 7 | 	type $$Props = LabelPrimitive.Props;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export { className as class };
11 | 
12 | 	const { labelAttrs } = getFormControl();
13 | </script>
14 | 
15 | <Label {...$labelAttrs} class={cn("data-[fs-error]:text-destructive", className)} {...$$restProps}>
16 | 	<slot {labelAttrs} />
17 | </Label>
18 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/form-legend.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import * as FormPrimitive from "formsnap";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = FormPrimitive.LegendProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <FormPrimitive.Legend
12 | 	{...$$restProps}
13 | 	class={cn("text-sm font-medium leading-none data-[fs-error]:text-destructive", className)}
14 | 	let:legendAttrs
15 | >
16 | 	<slot {legendAttrs} />
17 | </FormPrimitive.Legend>
18 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/form/index.ts:
--------------------------------------------------------------------------------
 1 | import * as FormPrimitive from "formsnap";
 2 | import Description from "./form-description.svelte";
 3 | import Label from "./form-label.svelte";
 4 | import FieldErrors from "./form-field-errors.svelte";
 5 | import Field from "./form-field.svelte";
 6 | import Fieldset from "./form-fieldset.svelte";
 7 | import Legend from "./form-legend.svelte";
 8 | import ElementField from "./form-element-field.svelte";
 9 | import Button from "./form-button.svelte";
10 | 
11 | const Control = FormPrimitive.Control;
12 | 
13 | export {
14 | 	Field,
15 | 	Control,
16 | 	Label,
17 | 	Button,
18 | 	FieldErrors,
19 | 	Description,
20 | 	Fieldset,
21 | 	Legend,
22 | 	ElementField,
23 | 	//
24 | 	Field as FormField,
25 | 	Control as FormControl,
26 | 	Description as FormDescription,
27 | 	Label as FormLabel,
28 | 	FieldErrors as FormFieldErrors,
29 | 	Fieldset as FormFieldset,
30 | 	Legend as FormLegend,
31 | 	ElementField as FormElementField,
32 | 	Button as FormButton,
33 | };
34 | 


--------------------------------------------------------------------------------
/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.js";
 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 let align: $$Props["align"] = "center";
11 | 	export let sideOffset: $$Props["sideOffset"] = 4;
12 | 	export { className as class };
13 | </script>
14 | 
15 | <HoverCardPrimitive.Content
16 | 	{transition}
17 | 	{transitionConfig}
18 | 	{align}
19 | 	{sideOffset}
20 | 	class={cn(
21 | 		"z-50 mt-3 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
22 | 		className
23 | 	)}
24 | 	{...$$restProps}
25 | >
26 | 	<slot />
27 | </HoverCardPrimitive.Content>
28 | 


--------------------------------------------------------------------------------
/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 | export 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 | 	focusin: FormInputEvent<FocusEvent>;
12 | 	focusout: FormInputEvent<FocusEvent>;
13 | 	keydown: FormInputEvent<KeyboardEvent>;
14 | 	keypress: FormInputEvent<KeyboardEvent>;
15 | 	keyup: FormInputEvent<KeyboardEvent>;
16 | 	mouseover: FormInputEvent<MouseEvent>;
17 | 	mouseenter: FormInputEvent<MouseEvent>;
18 | 	mouseleave: FormInputEvent<MouseEvent>;
19 | 	paste: FormInputEvent<ClipboardEvent>;
20 | 	input: FormInputEvent<InputEvent>;
21 | };
22 | 
23 | export {
24 | 	Root,
25 | 	//
26 | 	Root as Input,
27 | };
28 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/input/input.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLInputAttributes } from "svelte/elements";
 3 | 	import type { InputEvents } from "./index.js";
 4 | 	import { cn } from "$lib/utils.js";
 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-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 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:focusin
25 | 	on:focusout
26 | 	on:keydown
27 | 	on:keypress
28 | 	on:keyup
29 | 	on:mouseover
30 | 	on:mouseenter
31 | 	on:mouseleave
32 | 	on:paste
33 | 	on:input
34 | 	{...$$restProps}
35 | />
36 | 


--------------------------------------------------------------------------------
/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.js";
 4 | 
 5 | 	type $$Props = LabelPrimitive.Props;
 6 | 	type $$Events = LabelPrimitive.Events;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <LabelPrimitive.Root
13 | 	class={cn(
14 | 		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
15 | 		className
16 | 	)}
17 | 	{...$$restProps}
18 | 	on:mousedown
19 | >
20 | 	<slot />
21 | </LabelPrimitive.Root>
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/loader/index.ts:
--------------------------------------------------------------------------------
1 | import Root from './loader.svelte';
2 | import PageLoader from './page-loader.svelte';
3 | 
4 | export { Root, Root as Loader, PageLoader };
5 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/loader/loader.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | 	import { Loader2 } from 'lucide-svelte';
3 | </script>
4 | 
5 | <Loader2 class="h-6 w-6 animate-spin " />
6 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/loader/page-loader.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import Loader from './loader.svelte';
 3 | </script>
 4 | 
 5 | <div
 6 | 	class="fixed left-0 top-0 z-[9999] flex h-screen w-screen items-center justify-center text-primary"
 7 | >
 8 | 	<div class="absolute left-0 top-0 h-full w-full bg-black/30" />
 9 | 	<div class="z-50 rounded bg-background p-5">
10 | 		<Loader />
11 | 	</div>
12 | </div>
13 | 


--------------------------------------------------------------------------------
/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 Check from "lucide-svelte/icons/check";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = MenubarPrimitive.CheckboxItemProps;
 7 | 	type $$Events = MenubarPrimitive.CheckboxItemEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let checked: $$Props["checked"] = false;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <MenubarPrimitive.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-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
18 | 		className
19 | 	)}
20 | 	on:click
21 | 	on:keydown
22 | 	on:focusin
23 | 	on:focusout
24 | 	on:pointerleave
25 | 	on:pointermove
26 | 	on:pointerdown
27 | 	{...$$restProps}
28 | >
29 | 	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
30 | 		<MenubarPrimitive.CheckboxIndicator>
31 | 			<Check class="h-4 w-4" />
32 | 		</MenubarPrimitive.CheckboxIndicator>
33 | 	</span>
34 | 	<slot />
35 | </MenubarPrimitive.CheckboxItem>
36 | 


--------------------------------------------------------------------------------
/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.js";
 4 | 
 5 | 	type $$Props = MenubarPrimitive.ContentProps;
 6 | 	type $$Events = MenubarPrimitive.ContentEvents;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export let sideOffset: $$Props["sideOffset"] = 8;
10 | 	export let alignOffset: $$Props["alignOffset"] = -4;
11 | 	export let align: $$Props["align"] = "start";
12 | 	export let side: $$Props["side"] = "bottom";
13 | 	export let transition: $$Props["transition"] = flyAndScale;
14 | 	export let transitionConfig: $$Props["transitionConfig"] = undefined;
15 | 	export { className as class };
16 | </script>
17 | 
18 | <MenubarPrimitive.Content
19 | 	{transition}
20 | 	{transitionConfig}
21 | 	{sideOffset}
22 | 	{align}
23 | 	{alignOffset}
24 | 	{side}
25 | 	class={cn(
26 | 		"z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
27 | 		className
28 | 	)}
29 | 	{...$$restProps}
30 | 	on:keydown
31 | >
32 | 	<slot />
33 | </MenubarPrimitive.Content>
34 | 


--------------------------------------------------------------------------------
/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.js";
 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-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground 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.js";
 4 | 
 5 | 	type $$Props = MenubarPrimitive.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 | <MenubarPrimitive.Label
15 | 	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
16 | 	{...$$restProps}
17 | >
18 | 	<slot />
19 | </MenubarPrimitive.Label>
20 | 


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


--------------------------------------------------------------------------------
/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.js";
 4 | 
 5 | 	type $$Props = MenubarPrimitive.SeparatorProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <MenubarPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", className)} {...$$restProps} />
12 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/menubar/menubar-shortcut.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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 text-muted-foreground", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </span>
17 | 


--------------------------------------------------------------------------------
/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.js";
 4 | 
 5 | 	type $$Props = MenubarPrimitive.SubContentProps;
 6 | 	type $$Events = MenubarPrimitive.SubContentEvents;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export let transition: $$Props["transition"] = flyAndScale;
10 | 	export let transitionConfig: $$Props["transitionConfig"] = { x: -10, y: 0 };
11 | 	export { className as class };
12 | </script>
13 | 
14 | <MenubarPrimitive.SubContent
15 | 	{transition}
16 | 	{transitionConfig}
17 | 	class={cn(
18 | 		"z-50 min-w-max rounded-md border bg-popover p-1 text-popover-foreground focus:outline-none",
19 | 		className
20 | 	)}
21 | 	{...$$restProps}
22 | 	on:focusout
23 | 	on:pointermove
24 | 	on:keydown
25 | >
26 | 	<slot />
27 | </MenubarPrimitive.SubContent>
28 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/menubar/menubar-sub-trigger.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Menubar as MenubarPrimitive } from "bits-ui";
 3 | 	import ChevronRight from "lucide-svelte/icons/chevron-right";
 4 | 	import { cn } from "$lib/utils.js";
 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-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground data-[disabled]:opacity-50",
19 | 		inset && "pl-8",
20 | 		className
21 | 	)}
22 | 	on:click
23 | 	{...$$restProps}
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.js";
 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.5 text-sm font-medium outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",
15 | 		className
16 | 	)}
17 | 	on:click
18 | 	on:keydown
19 | 	on:pointerenter
20 | 	{...$$restProps}
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.js";
 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("flex h-10 items-center space-x-1 rounded-md border bg-background p-1", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </MenubarPrimitive.Root>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/pagination/index.ts:
--------------------------------------------------------------------------------
 1 | import Root from "./pagination.svelte";
 2 | import Content from "./pagination-content.svelte";
 3 | import Item from "./pagination-item.svelte";
 4 | import Link from "./pagination-link.svelte";
 5 | import PrevButton from "./pagination-prev-button.svelte";
 6 | import NextButton from "./pagination-next-button.svelte";
 7 | import Ellipsis from "./pagination-ellipsis.svelte";
 8 | export {
 9 | 	Root,
10 | 	Content,
11 | 	Item,
12 | 	Link,
13 | 	PrevButton,
14 | 	NextButton,
15 | 	Ellipsis,
16 | 	//
17 | 	Root as Pagination,
18 | 	Content as PaginationContent,
19 | 	Item as PaginationItem,
20 | 	Link as PaginationLink,
21 | 	PrevButton as PaginationPrevButton,
22 | 	NextButton as PaginationNextButton,
23 | 	Ellipsis as PaginationEllipsis,
24 | };
25 | 


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


--------------------------------------------------------------------------------
/src/lib/components/ui/pagination/pagination-ellipsis.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import Ellipsis from "lucide-svelte/icons/ellipsis";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <span
13 | 	aria-hidden
14 | 	class={cn("flex h-9 w-9 items-center justify-center", className)}
15 | 	{...$$restProps}
16 | >
17 | 	<Ellipsis class="h-4 w-4" />
18 | 	<span class="sr-only">More pages</span>
19 | </span>
20 | 


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


--------------------------------------------------------------------------------
/src/lib/components/ui/pagination/pagination-link.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Pagination as PaginationPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 	import { type Props, buttonVariants } from "$lib/components/ui/button/index.js";
 5 | 
 6 | 	type $$Props = PaginationPrimitive.PageProps &
 7 | 		Props & {
 8 | 			isActive: boolean;
 9 | 		};
10 | 
11 | 	type $$Events = PaginationPrimitive.PageEvents;
12 | 
13 | 	let className: $$Props["class"] = undefined;
14 | 	export let page: $$Props["page"];
15 | 	export let size: $$Props["size"] = "icon";
16 | 	export let isActive: $$Props["isActive"] = false;
17 | 
18 | 	export { className as class };
19 | </script>
20 | 
21 | <PaginationPrimitive.Page
22 | 	bind:page
23 | 	class={cn(
24 | 		buttonVariants({
25 | 			variant: isActive ? "outline" : "ghost",
26 | 			size,
27 | 		}),
28 | 		className
29 | 	)}
30 | 	{...$$restProps}
31 | 	on:click
32 | >
33 | 	<slot>{page.value}</slot>
34 | </PaginationPrimitive.Page>
35 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/pagination/pagination-next-button.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Pagination as PaginationPrimitive } from "bits-ui";
 3 | 	import ChevronRight from "lucide-svelte/icons/chevron-right";
 4 | 	import { Button } from "$lib/components/ui/button/index.js";
 5 | 	import { cn } from "$lib/utils.js";
 6 | 
 7 | 	type $$Props = PaginationPrimitive.NextButtonProps;
 8 | 	type $$Events = PaginationPrimitive.NextButtonEvents;
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <PaginationPrimitive.NextButton asChild let:builder>
15 | 	<Button
16 | 		variant="ghost"
17 | 		class={cn("gap-1 pr-2.5", className)}
18 | 		builders={[builder]}
19 | 		on:click
20 | 		{...$$restProps}
21 | 	>
22 | 		<slot>
23 | 			<span>Next</span>
24 | 			<ChevronRight class="h-4 w-4" />
25 | 		</slot>
26 | 	</Button>
27 | </PaginationPrimitive.NextButton>
28 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/pagination/pagination-prev-button.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Pagination as PaginationPrimitive } from "bits-ui";
 3 | 	import ChevronLeft from "lucide-svelte/icons/chevron-left";
 4 | 	import { Button } from "$lib/components/ui/button/index.js";
 5 | 	import { cn } from "$lib/utils.js";
 6 | 
 7 | 	type $$Props = PaginationPrimitive.PrevButtonProps;
 8 | 	type $$Events = PaginationPrimitive.PrevButtonEvents;
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <PaginationPrimitive.PrevButton asChild let:builder>
15 | 	<Button
16 | 		variant="ghost"
17 | 		class={cn("gap-1 pl-2.5", className)}
18 | 		builders={[builder]}
19 | 		on:click
20 | 		{...$$restProps}
21 | 	>
22 | 		<slot>
23 | 			<ChevronLeft class="h-4 w-4" />
24 | 			<span>Previous</span>
25 | 		</slot>
26 | 	</Button>
27 | </PaginationPrimitive.PrevButton>
28 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/pagination/pagination.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Pagination as PaginationPrimitive } from "bits-ui";
 3 | 
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = PaginationPrimitive.Props;
 7 | 	type $$Events = PaginationPrimitive.Events;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let count: $$Props["count"] = 0;
11 | 	export let perPage: $$Props["perPage"] = 10;
12 | 	export let page: $$Props["page"] = 1;
13 | 	export let siblingCount: $$Props["siblingCount"] = 1;
14 | 
15 | 	export { className as class };
16 | 
17 | 	$: currentPage = page;
18 | </script>
19 | 
20 | <PaginationPrimitive.Root
21 | 	{count}
22 | 	{perPage}
23 | 	{siblingCount}
24 | 	bind:page
25 | 	let:builder
26 | 	let:pages
27 | 	let:range
28 | 	asChild
29 | 	{...$$restProps}
30 | >
31 | 	<nav {...builder} class={cn("mx-auto flex w-full flex-col items-center", className)}>
32 | 		<slot {pages} {range} {currentPage} />
33 | 	</nav>
34 | </PaginationPrimitive.Root>
35 | 


--------------------------------------------------------------------------------
/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 | const Close = PopoverPrimitive.Close;
 6 | 
 7 | export {
 8 | 	Root,
 9 | 	Content,
10 | 	Trigger,
11 | 	Close,
12 | 	//
13 | 	Root as Popover,
14 | 	Content as PopoverContent,
15 | 	Trigger as PopoverTrigger,
16 | 	Close as PopoverClose,
17 | };
18 | 


--------------------------------------------------------------------------------
/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.js";
 4 | 
 5 | 	type $$Props = PopoverPrimitive.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 | </script>
11 | 
12 | <PopoverPrimitive.Content
13 | 	{transition}
14 | 	{transitionConfig}
15 | 	class={cn(
16 | 		"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
17 | 		className
18 | 	)}
19 | 	{...$$restProps}
20 | >
21 | 	<slot />
22 | </PopoverPrimitive.Content>
23 | 


--------------------------------------------------------------------------------
/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.js";
 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("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
15 | 	{...$$restProps}
16 | >
17 | 	<div
18 | 		class="h-full w-full flex-1 bg-primary transition-all"
19 | 		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
20 | 	/>
21 | </ProgressPrimitive.Root>
22 | 


--------------------------------------------------------------------------------
/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 Circle from "lucide-svelte/icons/circle";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = RadioGroupPrimitive.ItemProps;
 7 | 	type $$Events = RadioGroupPrimitive.ItemEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let value: $$Props["value"];
11 | 	export { className as class };
12 | </script>
13 | 
14 | <RadioGroupPrimitive.Item
15 | 	{value}
16 | 	class={cn(
17 | 		"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
18 | 		className
19 | 	)}
20 | 	{...$$restProps}
21 | 	on:click
22 | >
23 | 	<div class="flex items-center justify-center">
24 | 		<RadioGroupPrimitive.ItemIndicator>
25 | 			<Circle class="h-2.5 w-2.5 fill-current text-current" />
26 | 		</RadioGroupPrimitive.ItemIndicator>
27 | 	</div>
28 | </RadioGroupPrimitive.Item>
29 | 


--------------------------------------------------------------------------------
/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.js";
 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 bind:value class={cn("grid gap-2", className)} {...$$restProps}>
13 | 	<slot />
14 | </RadioGroupPrimitive.Root>
15 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/range-calendar/index.ts:
--------------------------------------------------------------------------------
 1 | import Root from "./range-calendar.svelte";
 2 | import Cell from "./range-calendar-cell.svelte";
 3 | import Day from "./range-calendar-day.svelte";
 4 | import Grid from "./range-calendar-grid.svelte";
 5 | import Header from "./range-calendar-header.svelte";
 6 | import Months from "./range-calendar-months.svelte";
 7 | import GridRow from "./range-calendar-grid-row.svelte";
 8 | import Heading from "./range-calendar-heading.svelte";
 9 | import GridBody from "./range-calendar-grid-body.svelte";
10 | import GridHead from "./range-calendar-grid-head.svelte";
11 | import HeadCell from "./range-calendar-head-cell.svelte";
12 | import NextButton from "./range-calendar-next-button.svelte";
13 | import PrevButton from "./range-calendar-prev-button.svelte";
14 | 
15 | export {
16 | 	Day,
17 | 	Cell,
18 | 	Grid,
19 | 	Header,
20 | 	Months,
21 | 	GridRow,
22 | 	Heading,
23 | 	GridBody,
24 | 	GridHead,
25 | 	HeadCell,
26 | 	NextButton,
27 | 	PrevButton,
28 | 	//
29 | 	Root as RangeCalendar,
30 | };
31 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/range-calendar/range-calendar-cell.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = RangeCalendarPrimitive.CellProps;
 6 | 
 7 | 	export let date: $$Props["date"];
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <RangeCalendarPrimitive.Cell
13 | 	{date}
14 | 	class={cn(
15 | 		"relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-month])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md",
16 | 		className
17 | 	)}
18 | 	{...$$restProps}
19 | >
20 | 	<slot />
21 | </RangeCalendarPrimitive.Cell>
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = RangeCalendarPrimitive.GridBodyProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <RangeCalendarPrimitive.GridBody class={cn(className)} {...$$restProps}>
12 | 	<slot />
13 | </RangeCalendarPrimitive.GridBody>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = RangeCalendarPrimitive.GridHeadProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <RangeCalendarPrimitive.GridHead class={cn(className)} {...$$restProps}>
12 | 	<slot />
13 | </RangeCalendarPrimitive.GridHead>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = RangeCalendarPrimitive.GridRowProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <RangeCalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
12 | 	<slot />
13 | </RangeCalendarPrimitive.GridRow>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/range-calendar/range-calendar-grid.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = RangeCalendarPrimitive.GridProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <RangeCalendarPrimitive.Grid
12 | 	class={cn("w-full border-collapse space-y-1", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </RangeCalendarPrimitive.Grid>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = RangeCalendarPrimitive.HeadCellProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <RangeCalendarPrimitive.HeadCell
12 | 	class={cn("w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </RangeCalendarPrimitive.HeadCell>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/range-calendar/range-calendar-header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = RangeCalendarPrimitive.HeaderProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <RangeCalendarPrimitive.Header
12 | 	class={cn("relative flex w-full items-center justify-between pt-1", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </RangeCalendarPrimitive.Header>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/range-calendar/range-calendar-heading.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = RangeCalendarPrimitive.HeadingProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <RangeCalendarPrimitive.Heading
12 | 	let:headingValue
13 | 	class={cn("text-sm font-medium", className)}
14 | 	{...$$restProps}
15 | >
16 | 	<slot {headingValue}>
17 | 		{headingValue}
18 | 	</slot>
19 | </RangeCalendarPrimitive.Heading>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/range-calendar/range-calendar-months.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 3 | 	import ChevronRight from "lucide-svelte/icons/chevron-right";
 4 | 	import { buttonVariants } from "$lib/components/ui/button/index.js";
 5 | 	import { cn } from "$lib/utils.js";
 6 | 
 7 | 	type $$Props = RangeCalendarPrimitive.NextButtonProps;
 8 | 	type $$Events = RangeCalendarPrimitive.NextButtonEvents;
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <RangeCalendarPrimitive.NextButton
15 | 	on:click
16 | 	class={cn(
17 | 		buttonVariants({ variant: "outline" }),
18 | 		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
19 | 		className
20 | 	)}
21 | 	{...$$restProps}
22 | 	let:builder
23 | >
24 | 	<slot {builder}>
25 | 		<ChevronRight class="h-4 w-4" />
26 | 	</slot>
27 | </RangeCalendarPrimitive.NextButton>
28 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 3 | 	import ChevronLeft from "lucide-svelte/icons/chevron-left";
 4 | 	import { buttonVariants } from "$lib/components/ui/button/index.js";
 5 | 	import { cn } from "$lib/utils.js";
 6 | 
 7 | 	type $$Props = RangeCalendarPrimitive.PrevButtonProps;
 8 | 	type $$Events = RangeCalendarPrimitive.PrevButtonEvents;
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <RangeCalendarPrimitive.PrevButton
15 | 	on:click
16 | 	class={cn(
17 | 		buttonVariants({ variant: "outline" }),
18 | 		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
19 | 		className
20 | 	)}
21 | 	{...$$restProps}
22 | 	let:builder
23 | >
24 | 	<slot {builder}>
25 | 		<ChevronLeft class="h-4 w-4" />
26 | 	</slot>
27 | </RangeCalendarPrimitive.PrevButton>
28 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/resizable/index.ts:
--------------------------------------------------------------------------------
 1 | import { Pane } from "paneforge";
 2 | import Handle from "./resizable-handle.svelte";
 3 | import PaneGroup from "./resizable-pane-group.svelte";
 4 | 
 5 | export {
 6 | 	PaneGroup,
 7 | 	Pane,
 8 | 	Handle,
 9 | 	//
10 | 	PaneGroup as ResizablePaneGroup,
11 | 	Pane as ResizablePane,
12 | 	Handle as ResizableHandle,
13 | };
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/resizable/resizable-handle.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import GripVertical from "lucide-svelte/icons/grip-vertical";
 3 | 	import * as ResizablePrimitive from "paneforge";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = ResizablePrimitive.PaneResizerProps & {
 7 | 		withHandle?: boolean;
 8 | 	};
 9 | 
10 | 	export let withHandle: $$Props["withHandle"] = false;
11 | 	export let el: $$Props["el"] = undefined;
12 | 	let className: $$Props["class"] = undefined;
13 | 	export { className as class };
14 | </script>
15 | 
16 | <ResizablePrimitive.PaneResizer
17 | 	bind:el
18 | 	class={cn(
19 | 		"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 data-[direction=vertical]:after:translate-x-0 [&[data-direction=vertical]>div]:rotate-90",
20 | 		className
21 | 	)}
22 | >
23 | 	{#if withHandle}
24 | 		<div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
25 | 			<GripVertical class="h-2.5 w-2.5" />
26 | 		</div>
27 | 	{/if}
28 | </ResizablePrimitive.PaneResizer>
29 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/resizable/resizable-pane-group.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import * as ResizablePrimitive from "paneforge";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = ResizablePrimitive.PaneGroupProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let direction: $$Props["direction"];
 9 | 	export let paneGroup: $$Props["paneGroup"] = undefined;
10 | 	export let el: $$Props["el"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <ResizablePrimitive.PaneGroup
15 | 	bind:el
16 | 	bind:paneGroup
17 | 	{direction}
18 | 	class={cn("flex h-full w-full data-[direction=vertical]:flex-col", className)}
19 | 	{...$$restProps}
20 | >
21 | 	<slot />
22 | </ResizablePrimitive.PaneGroup>
23 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/scroll-area/index.ts:
--------------------------------------------------------------------------------
 1 | import Scrollbar from "./scroll-area-scrollbar.svelte";
 2 | import Root from "./scroll-area.svelte";
 3 | 
 4 | export {
 5 | 	Root,
 6 | 	Scrollbar,
 7 | 	//,
 8 | 	Root as ScrollArea,
 9 | 	Scrollbar as ScrollAreaScrollbar,
10 | };
11 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
 6 | 		orientation?: "vertical" | "horizontal";
 7 | 	};
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let orientation: $$Props["orientation"] = "vertical";
11 | 	export { className as class };
12 | </script>
13 | 
14 | <ScrollAreaPrimitive.Scrollbar
15 | 	{orientation}
16 | 	class={cn(
17 | 		"flex touch-none select-none transition-colors",
18 | 		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
19 | 		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
20 | 		className
21 | 	)}
22 | >
23 | 	<slot />
24 | 	<ScrollAreaPrimitive.Thumb
25 | 		class={cn("relative rounded-full bg-border", orientation === "vertical" && "flex-1")}
26 | 	/>
27 | </ScrollAreaPrimitive.Scrollbar>
28 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/scroll-area/scroll-area.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
 3 | 	import { Scrollbar } from "./index.js";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = ScrollAreaPrimitive.Props & {
 7 | 		orientation?: "vertical" | "horizontal" | "both";
 8 | 		scrollbarXClasses?: string;
 9 | 		scrollbarYClasses?: string;
10 | 	};
11 | 
12 | 	let className: $$Props["class"] = undefined;
13 | 	export { className as class };
14 | 	export let orientation = "vertical";
15 | 	export let scrollbarXClasses: string = "";
16 | 	export let scrollbarYClasses: string = "";
17 | </script>
18 | 
19 | <ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
20 | 	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
21 | 		<ScrollAreaPrimitive.Content>
22 | 			<slot />
23 | 		</ScrollAreaPrimitive.Content>
24 | 	</ScrollAreaPrimitive.Viewport>
25 | 	{#if orientation === "vertical" || orientation === "both"}
26 | 		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
27 | 	{/if}
28 | 	{#if orientation === "horizontal" || orientation === "both"}
29 | 		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
30 | 	{/if}
31 | 	<ScrollAreaPrimitive.Corner />
32 | </ScrollAreaPrimitive.Root>
33 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/index.ts:
--------------------------------------------------------------------------------
 1 | import { Select as SelectPrimitive } from "bits-ui";
 2 | 
 3 | import Label from "./select-label.svelte";
 4 | import Item from "./select-item.svelte";
 5 | import Content from "./select-content.svelte";
 6 | import Trigger from "./select-trigger.svelte";
 7 | import Separator from "./select-separator.svelte";
 8 | 
 9 | const Root = SelectPrimitive.Root;
10 | const Group = SelectPrimitive.Group;
11 | const Input = SelectPrimitive.Input;
12 | const Value = SelectPrimitive.Value;
13 | 
14 | export {
15 | 	Root,
16 | 	Group,
17 | 	Input,
18 | 	Label,
19 | 	Item,
20 | 	Value,
21 | 	Content,
22 | 	Trigger,
23 | 	Separator,
24 | 	//
25 | 	Root as Select,
26 | 	Group as SelectGroup,
27 | 	Input as SelectInput,
28 | 	Label as SelectLabel,
29 | 	Item as SelectItem,
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 { scale } from "svelte/transition";
 4 | 	import { cn, flyAndScale } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = SelectPrimitive.ContentProps;
 7 | 	type $$Events = SelectPrimitive.ContentEvents;
 8 | 
 9 | 	export let sideOffset: $$Props["sideOffset"] = 4;
10 | 	export let inTransition: $$Props["inTransition"] = flyAndScale;
11 | 	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
12 | 	export let outTransition: $$Props["outTransition"] = scale;
13 | 	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
14 | 		start: 0.95,
15 | 		opacity: 0,
16 | 		duration: 50,
17 | 	};
18 | 
19 | 	let className: $$Props["class"] = undefined;
20 | 	export { className as class };
21 | </script>
22 | 
23 | <SelectPrimitive.Content
24 | 	{inTransition}
25 | 	{inTransitionConfig}
26 | 	{outTransition}
27 | 	{outTransitionConfig}
28 | 	{sideOffset}
29 | 	class={cn(
30 | 		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
31 | 		className
32 | 	)}
33 | 	{...$$restProps}
34 | 	on:keydown
35 | >
36 | 	<div class="w-full p-1">
37 | 		<slot />
38 | 	</div>
39 | </SelectPrimitive.Content>
40 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import Check from "lucide-svelte/icons/check";
 3 | 	import { Select as SelectPrimitive } from "bits-ui";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = SelectPrimitive.ItemProps;
 7 | 	type $$Events = 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-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
22 | 		className
23 | 	)}
24 | 	{...$$restProps}
25 | 	on:click
26 | 	on:keydown
27 | 	on:focusin
28 | 	on:focusout
29 | 	on:pointerleave
30 | 	on:pointermove
31 | >
32 | 	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
33 | 		<SelectPrimitive.ItemIndicator>
34 | 			<Check class="h-4 w-4" />
35 | 		</SelectPrimitive.ItemIndicator>
36 | 	</span>
37 | 	<slot>
38 | 		{label || value}
39 | 	</slot>
40 | </SelectPrimitive.Item>
41 | 


--------------------------------------------------------------------------------
/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.js";
 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("py-1.5 pl-8 pr-2 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.js";
 4 | 
 5 | 	type $$Props = SelectPrimitive.SeparatorProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <SelectPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", className)} {...$$restProps} />
12 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-trigger.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Select as SelectPrimitive } from "bits-ui";
 3 | 	import ChevronDown from "lucide-svelte/icons/chevron-down";
 4 | 	import { cn } from "$lib/utils.js";
 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-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
16 | 		className
17 | 	)}
18 | 	{...$$restProps}
19 | 	let:builder
20 | 	on:click
21 | 	on:keydown
22 | >
23 | 	<slot {builder} />
24 | 	<div>
25 | 		<ChevronDown class="h-4 w-4 opacity-50" />
26 | 	</div>
27 | </SelectPrimitive.Trigger>
28 | 


--------------------------------------------------------------------------------
/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.js";
 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-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as SheetPrimitive } from "bits-ui";
 3 | 	import X from "lucide-svelte/icons/x";
 4 | 	import { fly } from "svelte/transition";
 5 | 	import {
 6 | 		SheetOverlay,
 7 | 		SheetPortal,
 8 | 		type Side,
 9 | 		sheetTransitions,
10 | 		sheetVariants,
11 | 	} from "./index.js";
12 | 	import { cn } from "$lib/utils.js";
13 | 
14 | 	type $$Props = SheetPrimitive.ContentProps & {
15 | 		side?: Side;
16 | 	};
17 | 
18 | 	let className: $$Props["class"] = undefined;
19 | 	export let side: $$Props["side"] = "right";
20 | 	export { className as class };
21 | 	export let inTransition: $$Props["inTransition"] = fly;
22 | 	export let inTransitionConfig: $$Props["inTransitionConfig"] =
23 | 		sheetTransitions[side ?? "right"].in;
24 | 	export let outTransition: $$Props["outTransition"] = fly;
25 | 	export let outTransitionConfig: $$Props["outTransitionConfig"] =
26 | 		sheetTransitions[side ?? "right"].out;
27 | </script>
28 | 
29 | <SheetPortal>
30 | 	<SheetOverlay />
31 | 	<SheetPrimitive.Content
32 | 		{inTransition}
33 | 		{inTransitionConfig}
34 | 		{outTransition}
35 | 		{outTransitionConfig}
36 | 		class={cn(sheetVariants({ side }), className)}
37 | 		{...$$restProps}
38 | 	>
39 | 		<slot />
40 | 		<SheetPrimitive.Close
41 | 			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-secondary"
42 | 		>
43 | 			<X class="h-4 w-4" />
44 | 			<span class="sr-only">Close</span>
45 | 		</SheetPrimitive.Close>
46 | 	</SheetPrimitive.Content>
47 | </SheetPortal>
48 | 


--------------------------------------------------------------------------------
/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.js";
 4 | 
 5 | 	type $$Props = SheetPrimitive.DescriptionProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <SheetPrimitive.Description class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
12 | 	<slot />
13 | </SheetPrimitive.Description>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/sheet/sheet-footer.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/sheet/sheet-header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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-2 text-center sm:text-left", className)} {...$$restProps}>
12 | 	<slot />
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/sheet/sheet-overlay.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as SheetPrimitive } from "bits-ui";
 3 | 	import { fade } from "svelte/transition";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = SheetPrimitive.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 | <SheetPrimitive.Overlay
17 | 	{transition}
18 | 	{transitionConfig}
19 | 	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)}
20 | 	{...$$restProps}
21 | />
22 | 


--------------------------------------------------------------------------------
/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.js";
 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.js";
 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 type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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("animate-pulse rounded-md bg-muted", className)} {...$$restProps} />
12 | 


--------------------------------------------------------------------------------
/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.js";
 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("relative flex w-full touch-none select-none items-center", className)}
15 | 	{...$$restProps}
16 | 	let:thumbs
17 | >
18 | 	<span class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
19 | 		<SliderPrimitive.Range class="absolute h-full bg-primary" />
20 | 	</span>
21 | 	{#each thumbs as thumb}
22 | 		<SliderPrimitive.Thumb
23 | 			{thumb}
24 | 			class="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
25 | 		/>
26 | 	{/each}
27 | </SliderPrimitive.Root>
28 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/sonner/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Toaster } from "./sonner.svelte";
2 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/sonner/sonner.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
 3 | 	import { mode } from "mode-watcher";
 4 | 
 5 | 	type $$Props = SonnerProps;
 6 | </script>
 7 | 
 8 | <Sonner
 9 | 	theme={$mode}
10 | 	class="toaster group"
11 | 	toastOptions={{
12 | 		classes: {
13 | 			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
14 | 			description: "group-[.toast]:text-muted-foreground",
15 | 			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
16 | 			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
17 | 		},
18 | 	}}
19 | 	{...$$restProps}
20 | />
21 | 


--------------------------------------------------------------------------------
/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.js";
 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-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent 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-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 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 type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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 type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLTableCaptionElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <caption class={cn("mt-4 text-sm text-muted-foreground", className)} {...$$restProps}>
12 | 	<slot />
13 | </caption>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-cell.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLTdAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
13 | 	{...$$restProps}
14 | 	on:click
15 | 	on:keydown
16 | >
17 | 	<slot />
18 | </td>
19 | 


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


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-head.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLThAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
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 type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
12 | <thead class={cn("[&_tr]:border-b", className)} {...$$restProps} on:click on:keydown>
13 | 	<slot />
14 | </thead>
15 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-row.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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 | 	on:click
20 | 	on:keydown
21 | >
22 | 	<slot />
23 | </tr>
24 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLTableAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 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 class={cn("w-full caption-bottom text-sm", className)} {...$$restProps}>
13 | 		<slot />
14 | 	</table>
15 | </div>
16 | 


--------------------------------------------------------------------------------
/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.js";
 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.js";
 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-10 items-center justify-center rounded-md 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.js";
 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-sm px-3 py-1.5 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-sm",
16 | 		className
17 | 	)}
18 | 	{value}
19 | 	{...$$restProps}
20 | 	on:click
21 | >
22 | 	<slot />
23 | </TabsPrimitive.Trigger>
24 | 


--------------------------------------------------------------------------------
/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.js";
 4 | 
 5 | 	type $$Props = HTMLTextareaAttributes;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let value: $$Props["value"] = undefined;
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <textarea
13 | 	class={cn(
14 | 		"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 | 		className
16 | 	)}
17 | 	bind:value
18 | 	on:blur
19 | 	on:change
20 | 	on:click
21 | 	on:focus
22 | 	on:keydown
23 | 	on:keypress
24 | 	on:keyup
25 | 	on:mouseover
26 | 	on:mouseenter
27 | 	on:mouseleave
28 | 	on:paste
29 | 	on:input
30 | 	{...$$restProps}
31 | />
32 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/toggle-group/index.ts:
--------------------------------------------------------------------------------
 1 | import type { VariantProps } from "tailwind-variants";
 2 | import { getContext, setContext } from "svelte";
 3 | import Root from "./toggle-group.svelte";
 4 | import Item from "./toggle-group-item.svelte";
 5 | import type { toggleVariants } from "$lib/components/ui/toggle/index.js";
 6 | 
 7 | export type ToggleVariants = VariantProps<typeof toggleVariants>;
 8 | 
 9 | export function setToggleGroupCtx(props: ToggleVariants) {
10 | 	setContext("toggleGroup", props);
11 | }
12 | 
13 | export function getToggleGroupCtx() {
14 | 	return getContext<ToggleVariants>("toggleGroup");
15 | }
16 | 
17 | export {
18 | 	Root,
19 | 	Item,
20 | 	//
21 | 	Root as ToggleGroup,
22 | 	Item as ToggleGroupItem,
23 | };
24 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/toggle-group/toggle-group-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
 3 | 	import { type ToggleVariants, getToggleGroupCtx } from "./index.js";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 	import { toggleVariants } from "$lib/components/ui/toggle/index.js";
 6 | 
 7 | 	type $$Props = ToggleGroupPrimitive.ItemProps & ToggleVariants;
 8 | 
 9 | 	let className: string | undefined | null = undefined;
10 | 
11 | 	export { className as class };
12 | 	export let variant: $$Props["variant"] = "default";
13 | 	export let size: $$Props["size"] = "default";
14 | 	export let value: $$Props["value"];
15 | 
16 | 	const ctx = getToggleGroupCtx();
17 | </script>
18 | 
19 | <ToggleGroupPrimitive.Item
20 | 	class={cn(
21 | 		toggleVariants({
22 | 			variant: ctx.variant || variant,
23 | 			size: ctx.size || size,
24 | 		}),
25 | 		className
26 | 	)}
27 | 	{value}
28 | 	{...$$restProps}
29 | >
30 | 	<slot />
31 | </ToggleGroupPrimitive.Item>
32 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/toggle-group/toggle-group.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { VariantProps } from "tailwind-variants";
 3 | 	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
 4 | 	import { setToggleGroupCtx } from "./index.js";
 5 | 	import type { toggleVariants } from "$lib/components/ui/toggle/index.js";
 6 | 	import { cn } from "$lib/utils.js";
 7 | 
 8 | 	type T = $$Generic<"single" | "multiple">;
 9 | 	type $$Props = ToggleGroupPrimitive.Props<T> & VariantProps<typeof toggleVariants>;
10 | 
11 | 	let className: string | undefined | null = undefined;
12 | 	export { className as class };
13 | 	export let variant: $$Props["variant"] = "default";
14 | 	export let size: $$Props["size"] = "default";
15 | 	export let value: $$Props["value"] = undefined;
16 | 
17 | 	setToggleGroupCtx({
18 | 		variant,
19 | 		size,
20 | 	});
21 | </script>
22 | 
23 | <ToggleGroupPrimitive.Root
24 | 	class={cn("flex items-center justify-center gap-1", className)}
25 | 	bind:value
26 | 	{...$$restProps}
27 | 	let:builder
28 | >
29 | 	<slot {builder} />
30 | </ToggleGroupPrimitive.Root>
31 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/toggle/index.ts:
--------------------------------------------------------------------------------
 1 | import { type VariantProps, tv } from "tailwind-variants";
 2 | import Root from "./toggle.svelte";
 3 | 
 4 | export const toggleVariants = tv({
 5 | 	base: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground 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=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 hover:bg-accent hover:text-accent-foreground",
11 | 		},
12 | 		size: {
13 | 			default: "h-10 px-3",
14 | 			sm: "h-9 px-2.5",
15 | 			lg: "h-11 px-5",
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 { type Size, type Variant, toggleVariants } from "./index.js";
 4 | 	import { cn } from "$lib/utils.js";
 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 | >
25 | 	<slot />
26 | </TogglePrimitive.Root>
27 | 


--------------------------------------------------------------------------------
/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.js";
 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 | 	{transition}
19 | 	{transitionConfig}
20 | 	{sideOffset}
21 | 	class={cn(
22 | 		"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
23 | 		className
24 | 	)}
25 | 	{...$$restProps}
26 | >
27 | 	<slot />
28 | </TooltipPrimitive.Content>
29 | 


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | // place files you want to import through the `$lib` alias in this folder.
2 | 


--------------------------------------------------------------------------------
/src/lib/server/auth.ts:
--------------------------------------------------------------------------------
 1 | import { Lucia } from 'lucia';
 2 | import { dev } from '$app/environment';
 3 | 
 4 | import { PrismaAdapter } from '@lucia-auth/adapter-prisma';
 5 | import { PrismaClient } from '@prisma/client';
 6 | 
 7 | export const db = new PrismaClient({
 8 | 	datasourceUrl: process.env.DATABASE_URL
 9 | });
10 | 
11 | const adapter = new PrismaAdapter(db.session, db.user);
12 | 
13 | export const lucia = new Lucia(adapter, {
14 | 	sessionCookie: {
15 | 		attributes: {
16 | 			secure: !dev
17 | 		}
18 | 	},
19 | 	getUserAttributes: (attributes) => {
20 | 		return {
21 | 			...attributes,
22 | 			hashed_password: undefined
23 | 		};
24 | 	}
25 | });
26 | 
27 | declare module 'lucia' {
28 | 	interface Register {
29 | 		Lucia: typeof lucia;
30 | 		DatabaseUserAttributes: DatabaseUserAttributes;
31 | 	}
32 | }
33 | 
34 | interface DatabaseUserAttributes {
35 | 	email: string;
36 | 	id: string;
37 | 	roles: string[];
38 | }
39 | 


--------------------------------------------------------------------------------
/src/lib/shared/modules/mailer/aws-mailer.ts:
--------------------------------------------------------------------------------
 1 | import { SESClient, SendEmailCommand } from '@aws-sdk/client-ses';
 2 | import type { EmailSendCommandParamsType, IEmailService } from '$lib/shared/types/mailer';
 3 | 
 4 | export class AWSEmailService implements IEmailService {
 5 | 	private emailClient: SESClient = new SESClient({
 6 | 		region: process.env.AWS_REGION,
 7 | 		credentials: {
 8 | 			accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
 9 | 			secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!
10 | 		}
11 | 	});
12 | 	constructor(private senderEmailAddress: string = process.env.SENDER_EMAIL!) {}
13 | 
14 | 	async sendEmail(params: EmailSendCommandParamsType): Promise<unknown> {
15 | 		return this.emailClient.send(this.createSendEmailCommand(params));
16 | 	}
17 | 	private createSendEmailCommand({
18 | 		subject,
19 | 		body,
20 | 		receiver
21 | 	}: EmailSendCommandParamsType): SendEmailCommand {
22 | 		return new SendEmailCommand({
23 | 			Source: this.senderEmailAddress,
24 | 			Destination: {
25 | 				ToAddresses: receiver
26 | 			},
27 | 			Message: {
28 | 				Subject: {
29 | 					Charset: 'UTF-8',
30 | 					Data: subject
31 | 				},
32 | 				Body: {
33 | 					Text: {
34 | 						Charset: 'UTF-8',
35 | 						Data: body
36 | 					}
37 | 				}
38 | 			}
39 | 		});
40 | 	}
41 | }
42 | const mailer = new AWSEmailService();
43 | export default mailer;
44 | 


--------------------------------------------------------------------------------
/src/lib/shared/modules/mailer/index.ts:
--------------------------------------------------------------------------------
1 | import { AWSEmailService } from './aws-mailer';
2 | 
3 | const mailer = new AWSEmailService();
4 | 
5 | export default mailer;
6 | 


--------------------------------------------------------------------------------
/src/lib/shared/modules/mailer/smtp-mailer.ts:
--------------------------------------------------------------------------------
 1 | /*import {
 2 | 	PRIVATE_SMTP_HOST,
 3 | 	PRIVATE_SMTP_PASS,
 4 | 	PRIVATE_SMTP_PORT,
 5 | 	PRIVATE_SMTP_SECURE,
 6 | 	PRIVATE_SMTP_SENDER_NAME,
 7 | 	PRIVATE_SMTP_USER
 8 | } from '$env/static/private';
 9 | import type { EmailSendCommandParamsType, IEmailService } from '$lib/shared/types/mailer';
10 | import { createTransport, type Transporter } from 'nodemailer';
11 | import type SMTPTransport from 'nodemailer/lib/smtp-transport';
12 | 
13 | type SenderInfoType = {
14 | 	name: string;
15 | 	email: string;
16 | };
17 | 
18 | export class SMTPEmailService implements IEmailService {
19 | 	private transporter: Transporter;
20 | 
21 | 	constructor(
22 | 		senderInfo: SenderInfoType = {
23 | 			name: PRIVATE_SMTP_SENDER_NAME,
24 | 			email: process.env.SENDER_EMAIL!
25 | 		}
26 | 	) {
27 | 		const config: SMTPTransport.Options = {
28 | 			host: PRIVATE_SMTP_HOST,
29 | 			port: Number(PRIVATE_SMTP_PORT),
30 | 			secure: PRIVATE_SMTP_SECURE === 'true',
31 | 			auth: {
32 | 				user: PRIVATE_SMTP_USER,
33 | 				pass: PRIVATE_SMTP_PASS
34 | 			},
35 | 			from: `"${senderInfo.name}" <${senderInfo.email}>`
36 | 		};
37 | 
38 | 		this.transporter = createTransport(config);
39 | 	}
40 | 
41 | 	async sendEmail(params: EmailSendCommandParamsType): Promise<unknown> {
42 | 		return this.transporter.sendMail({
43 | 			to: params.receiver.join(', '),
44 | 			subject: params.subject,
45 | 			text: params.body
46 | 		});
47 | 	}
48 | }
49 | 
50 | */
51 | 


--------------------------------------------------------------------------------
/src/lib/shared/types/mailer.ts:
--------------------------------------------------------------------------------
 1 | export type EmailSendCommandParamsType = {
 2 | 	subject: string;
 3 | 	body: string;
 4 | 	receiver: string[];
 5 | };
 6 | 
 7 | export interface IEmailService {
 8 | 	sendEmail(content: EmailSendCommandParamsType): Promise<unknown>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { type ClassValue, clsx } from "clsx";
 2 | import { twMerge } from "tailwind-merge";
 3 | import { cubicOut } from "svelte/easing";
 4 | import type { TransitionConfig } from "svelte/transition";
 5 | 
 6 | export function cn(...inputs: ClassValue[]) {
 7 | 	return twMerge(clsx(inputs));
 8 | }
 9 | 
10 | type FlyAndScaleParams = {
11 | 	y?: number;
12 | 	x?: number;
13 | 	start?: number;
14 | 	duration?: number;
15 | };
16 | 
17 | export const flyAndScale = (
18 | 	node: Element,
19 | 	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
20 | ): TransitionConfig => {
21 | 	const style = getComputedStyle(node);
22 | 	const transform = style.transform === "none" ? "" : style.transform;
23 | 
24 | 	const scaleConversion = (
25 | 		valueA: number,
26 | 		scaleA: [number, number],
27 | 		scaleB: [number, number]
28 | 	) => {
29 | 		const [minA, maxA] = scaleA;
30 | 		const [minB, maxB] = scaleB;
31 | 
32 | 		const percentage = (valueA - minA) / (maxA - minA);
33 | 		const valueB = percentage * (maxB - minB) + minB;
34 | 
35 | 		return valueB;
36 | 	};
37 | 
38 | 	const styleToString = (
39 | 		style: Record<string, number | string | undefined>
40 | 	): string => {
41 | 		return Object.keys(style).reduce((str, key) => {
42 | 			if (style[key] === undefined) return str;
43 | 			return str + `${key}:${style[key]};`;
44 | 		}, "");
45 | 	};
46 | 
47 | 	return {
48 | 		duration: params.duration ?? 200,
49 | 		delay: 0,
50 | 		css: (t) => {
51 | 			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
52 | 			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
53 | 			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
54 | 
55 | 			return styleToString({
56 | 				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
57 | 				opacity: t
58 | 			});
59 | 		},
60 | 		easing: cubicOut
61 | 	};
62 | };


--------------------------------------------------------------------------------
/src/routes/(protected)/protected/+layout.server.ts:
--------------------------------------------------------------------------------
1 | import { redirect } from '@sveltejs/kit';
2 | 
3 | export const load = async (event) => {
4 | 	if (!event.locals.user) redirect(302, '/signin');
5 | 	return {
6 | 		user: event.locals.user
7 | 	};
8 | };
9 | 


--------------------------------------------------------------------------------
/src/routes/(protected)/protected/+layout.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | 	import AppShell from '../../../lib/components/layout/AppShell.svelte';
3 | 	export let data;
4 | </script>
5 | 
6 | <AppShell user={data?.user}>
7 | 	<slot />
8 | </AppShell>
9 | 


--------------------------------------------------------------------------------
/src/routes/(protected)/protected/admin/overview/+page.svelte:
--------------------------------------------------------------------------------
1 | ADMIN ONLY AREA!!
2 | 


--------------------------------------------------------------------------------
/src/routes/(protected)/protected/another-page/+page.svelte:
--------------------------------------------------------------------------------
1 | Another page to show you how it works
2 | 


--------------------------------------------------------------------------------
/src/routes/(protected)/protected/bought-products/+page.server.ts:
--------------------------------------------------------------------------------
 1 | import { db } from '../../../../lib/server/auth';
 2 | 
 3 | export const load = async (event) => {
 4 | 	const user = await event.locals.user;
 5 | 
 6 | 	const boughtProducts = await db.boughtProduct.findMany({
 7 | 		where: {
 8 | 			userId: user!.id
 9 | 		},
10 | 		include: {
11 | 			product: true
12 | 		}
13 | 	});
14 | 
15 | 	return {
16 | 		boughtProducts
17 | 	};
18 | };
19 | 


--------------------------------------------------------------------------------
/src/routes/(protected)/protected/bought-products/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import Button from '../../../../lib/components/ui/button/button.svelte';
 3 | 	import { Card } from '../../../../lib/components/ui/card';
 4 | 
 5 | 	export let data;
 6 | </script>
 7 | 
 8 | <div class="flex flex-wrap gap-4">
 9 | 	{#each data.boughtProducts as product}
10 | 		<Card class="rounded-lg border text-foreground shadow-sm" data-v0-t="card">
11 | 			<div class="p-6">
12 | 				<div class="grid gap-2">
13 | 					<h2 class="text-xl font-bold">{product?.product?.name}</h2>
14 | 					<p class="text-sm leading-none">{product?.product?.description}</p>
15 | 					<p class="text-sm leading-none">{product?.product?.price}$</p>
16 | 				</div>
17 | 			</div>
18 | 			<div class="flex items-center p-6">
19 | 				<Button>Some action here for the product</Button>
20 | 			</div>
21 | 		</Card>
22 | 	{/each}
23 | </div>
24 | 


--------------------------------------------------------------------------------
/src/routes/(protected)/protected/dashboard/+page.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | 	export let data;
3 | </script>
4 | 
5 | {JSON.stringify(data, null, 2)}
6 | 


--------------------------------------------------------------------------------
/src/routes/(protected)/protected/logout/+page.server.ts:
--------------------------------------------------------------------------------
 1 | import { lucia } from '$lib/server/auth';
 2 | import { fail, redirect } from '@sveltejs/kit';
 3 | 
 4 | export const actions = {
 5 | 	default: async (event) => {
 6 | 		if (!event.locals.session) {
 7 | 			return fail(401);
 8 | 		}
 9 | 		await lucia.invalidateSession(event.locals.session.id);
10 | 		const sessionCookie = lucia.createBlankSessionCookie();
11 | 		event.cookies.set(sessionCookie.name, sessionCookie.value, {
12 | 			path: '.',
13 | 			...sessionCookie.attributes
14 | 		});
15 | 		redirect(302, '/signin');
16 | 	}
17 | };
18 | 


--------------------------------------------------------------------------------
/src/routes/(protected)/protected/logout/+page.svelte:
--------------------------------------------------------------------------------
1 | Logout
2 | 


--------------------------------------------------------------------------------
/src/routes/(protected)/protected/payment/cancel/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import Button from '../../../../../lib/components/ui/button/button.svelte';
 3 | 	import Card from '../../../../../lib/components/ui/card/card.svelte';
 4 | </script>
 5 | 
 6 | <Card
 7 | 	class="mx-auto w-full max-w-sm rounded-lg border  text-card-foreground shadow-sm"
 8 | 	data-v0-t="card"
 9 | >
10 | 	<div class="flex flex-col items-center space-y-0 p-6">
11 | 		<h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight text-primary">
12 | 			Payment failed
13 | 		</h3>
14 | 		<p class="pt-6 text-sm text-primary">
15 | 			Something went wrong while processing your payment. Try it again or contact the support.
16 | 		</p>
17 | 	</div>
18 | 
19 | 	<div class="flex items-center p-6">
20 | 		<Button class="mx-auto ">
21 | 			<a href="/protected/store"> Back to store </a>
22 | 		</Button>
23 | 	</div>
24 | </Card>
25 | 


--------------------------------------------------------------------------------
/src/routes/(protected)/protected/payment/success/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import Button from '../../../../../lib/components/ui/button/button.svelte';
 3 | 	import Card from '../../../../../lib/components/ui/card/card.svelte';
 4 | </script>
 5 | 
 6 | <Card
 7 | 	class="mx-auto w-full max-w-sm rounded-lg border  text-card-foreground shadow-sm"
 8 | 	data-v0-t="card"
 9 | >
10 | 	<div class="flex flex-col items-center space-y-0 p-6">
11 | 		<h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight text-primary">
12 | 			Payment successful
13 | 		</h3>
14 | 		<p class="pt-6 text-sm text-primary">Thanks for buying our product.</p>
15 | 	</div>
16 | 
17 | 	<div class="flex items-center p-6">
18 | 		<Button class="mx-auto ">
19 | 			<a href="/protected/bought-products"> Go to your Products </a>
20 | 		</Button>
21 | 	</div>
22 | </Card>
23 | 


--------------------------------------------------------------------------------
/src/routes/(protected)/protected/settings/+page.server.ts:
--------------------------------------------------------------------------------
 1 | import { fail } from '@sveltejs/kit';
 2 | import { db } from '../../../../lib/server/auth';
 3 | import type { PageServerLoad } from './$types';
 4 | import { Argon2id } from 'oslo/password';
 5 | export const load = (async () => {
 6 | 	return {};
 7 | }) satisfies PageServerLoad;
 8 | 
 9 | export const actions = {
10 | 	default: async (event) => {
11 | 		const formData = await event.request.formData();
12 | 		const user = event.locals.user;
13 | 		const userFromDb = await db.user.findFirst({
14 | 			where: {
15 | 				id: user!.id
16 | 			}
17 | 		});
18 | 
19 | 		const oldPassword = formData.get('oldPassword') as string;
20 | 		const newPassword = formData.get('newPassword') as string;
21 | 		if (!oldPassword || !newPassword) {
22 | 			return fail(400, {
23 | 				message: 'Old and new password are required'
24 | 			});
25 | 		}
26 | 		const wasOldPasswordCorrect = await new Argon2id().verify(
27 | 			userFromDb!.hashed_password,
28 | 			oldPassword as string
29 | 		);
30 | 		if (!wasOldPasswordCorrect) {
31 | 			return fail(400, {
32 | 				message: 'Old password is incorrect'
33 | 			});
34 | 		}
35 | 		const hashedPasswordNew = await new Argon2id().hash(newPassword);
36 | 		await db.user.update({
37 | 			where: {
38 | 				id: user!.id
39 | 			},
40 | 			data: {
41 | 				hashed_password: hashedPasswordNew
42 | 			}
43 | 		});
44 | 		return {
45 | 			message: 'Password updated'
46 | 		};
47 | 	}
48 | };
49 | 


--------------------------------------------------------------------------------
/src/routes/(protected)/protected/store/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export let data;
 3 | </script>
 4 | 
 5 | <div class="grid grid-cols-3">
 6 | 	{#each data.products as product}
 7 | 		<form method="post" action="?/buyProduct">
 8 | 			<div>{product.name}</div>
 9 | 			<div>{product.price}</div>
10 | 			{product.description}
11 | 			<input type="hidden" name="productId" value={product.id} />
12 | 			<button type="submit">Buy</button>
13 | 		</form>
14 | 	{/each}
15 | </div>
16 | 


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import '../app.pcss';
 3 | 	import CookieBanner from '../lib/components/policy/CookieBanner.svelte';
 4 | 	import { Toaster } from '$lib/components/ui/sonner';
 5 | 	import { ModeWatcher } from 'mode-watcher';
 6 | 	import { navigating } from '$app/stores';
 7 | 	import { PageLoader } from '$lib/components/ui/loader';
 8 | </script>
 9 | 
10 | {#if !!$navigating}
11 | 	<PageLoader />
12 | {/if}
13 | 
14 | <ModeWatcher />
15 | <slot />
16 | <CookieBanner />
17 | <Toaster />
18 | 


--------------------------------------------------------------------------------
/src/routes/api/stripe/webhook/_stripe.ts:
--------------------------------------------------------------------------------
 1 | import Stripe from 'stripe';
 2 | import * as dotenv from 'dotenv';
 3 | 
 4 | dotenv.config();
 5 | 
 6 | const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
 7 | 	apiVersion: '2023-10-16'
 8 | });
 9 | 
10 | export default stripe;
11 | 


--------------------------------------------------------------------------------
/src/routes/reset-password/[token]/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import Button from '../../../lib/components/ui/button/button.svelte';
 3 | 	import Input from '../../../lib/components/ui/input/input.svelte';
 4 | 	import type { PageData } from './$types';
 5 | 
 6 | 	export let data: PageData;
 7 | </script>
 8 | 
 9 | <form method="post" class="mx-auto flex w-full max-w-xl flex-col gap-2">
10 | 	<Input type="password" name="password" placeholder="New password" required />
11 | 	<input type="hidden" name="token" value={data.token} />
12 | 	<Button type="submit">Reset password</Button>
13 | </form>
14 | 


--------------------------------------------------------------------------------
/src/routes/signup/+page.server.ts:
--------------------------------------------------------------------------------
 1 | import { db, lucia } from '$lib/server/auth';
 2 | import { fail, redirect } from '@sveltejs/kit';
 3 | 
 4 | import { Argon2id } from 'oslo/password';
 5 | 
 6 | export const actions = {
 7 | 	default: async (event) => {
 8 | 		const formData = await event.request.formData();
 9 | 		const email = formData.get('email') as string;
10 | 		const password = formData.get('password');
11 | 
12 | 		if (typeof password !== 'string' || password.length < 6 || password.length > 255) {
13 | 			return fail(400, {
14 | 				message: 'Invalid password'
15 | 			});
16 | 		}
17 | 
18 | 		const hashedPassword = await new Argon2id().hash(password);
19 | 
20 | 		const doesUserExist = await db.user.findFirst({
21 | 			where: {
22 | 				email
23 | 			}
24 | 		});
25 | 		if (doesUserExist) {
26 | 			return fail(400, {
27 | 				message: 'Email already in use'
28 | 			});
29 | 		}
30 | 		// TODO: check if email is already used
31 | 		const newUser = await db.user.create({
32 | 			data: {
33 | 				email,
34 | 				hashed_password: hashedPassword
35 | 			}
36 | 		});
37 | 
38 | 		const session = await lucia.createSession(newUser.id, {});
39 | 		const sessionCookie = lucia.createSessionCookie(session.id);
40 | 		event.cookies.set(sessionCookie.name, sessionCookie.value, {
41 | 			path: '.',
42 | 			...sessionCookie.attributes
43 | 		});
44 | 
45 | 		redirect(302, '/protected/dashboard');
46 | 	}
47 | };
48 | 


--------------------------------------------------------------------------------
/src/siteData.ts:
--------------------------------------------------------------------------------
 1 | import Home from 'lucide-svelte/icons/home';
 2 | 
 3 | import Package2 from 'lucide-svelte/icons/package-2';
 4 | 
 5 | export const siteData = {
 6 | 	appShellTitle: 'Starter Template',
 7 | 	dashboardLinks: [
 8 | 		{
 9 | 			name: 'Dashboard',
10 | 			icon: Home,
11 | 			href: '/protected/dashboard',
12 | 			needsRole: 'USER'
13 | 		},
14 | 		{
15 | 			name: 'Store',
16 | 			icon: Home,
17 | 			href: '/protected/store',
18 | 			needsRole: 'USER'
19 | 		},
20 | 		{
21 | 			name: 'Your Products',
22 | 			icon: Home,
23 | 			href: '/protected/bought-products',
24 | 			needsRole: 'USER'
25 | 		},
26 | 		{
27 | 			name: 'Another Page',
28 | 			icon: Package2,
29 | 			href: '/protected/another-page',
30 | 			needsRole: 'USER'
31 | 		},
32 | 		{
33 | 			name: 'Admin only area',
34 | 			icon: Package2,
35 | 			href: '/protected/admin/overview',
36 | 			needsRole: 'ADMIN'
37 | 		}
38 | 	],
39 | 	landingLinks: [
40 | 		{
41 | 			name: 'Home',
42 | 			href: '/'
43 | 		},
44 | 		{
45 | 			name: 'Login',
46 | 			href: '/signin'
47 | 		},
48 | 		{
49 | 			name: 'Register',
50 | 			href: '/signup'
51 | 		}
52 | 	],
53 | 	landingHeaderTitle: 'Starter Template',
54 | 	landingHeaderIconUrl: '/favicon.png',
55 | 	landingFooterIconUrl: '/favicon.png',
56 | 	footerLinks: {
57 | 		legal: [
58 | 			{
59 | 				name: 'Privacy Policy',
60 | 				href: '/privacy-policy'
61 | 			},
62 | 			{
63 | 				name: 'Terms of Service',
64 | 				href: '/terms-of-service'
65 | 			},
66 | 			{
67 | 				name: 'Data Protection',
68 | 				href: '/data-protection'
69 | 			}
70 | 		]
71 | 	},
72 | 	copyRightFooter: {
73 | 		text: '&copy; 2024, your company name'
74 | 	}
75 | };
76 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KoesterJannik/sveltekit-repo-starter/a5ba69e028d819d71d40e48cedd97f556b277d51/static/favicon.png


--------------------------------------------------------------------------------
/stripe-dev/.gitignore:
--------------------------------------------------------------------------------
1 | stripe


--------------------------------------------------------------------------------
/stripe-dev/mac.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Install
 3 | 
 4 | Install the correct version for your os here https://docs.stripe.com/stripe-cli
 5 | 
 6 | ## How to start the local cli webhook
 7 | 
 8 | ./stripe login
 9 | then
10 | ./stripe listen --forward-to localhost:5173/api/stripe/webhook


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-node';
 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 | 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 7 | 	// for more information about preprocessors
 8 | 	preprocess: [vitePreprocess({})],
 9 | 
10 | 	kit: {
11 | 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
12 | 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
13 | 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
14 | 		adapter: adapter()
15 | 	}
16 | };
17 | 
18 | export default config;
19 | 


--------------------------------------------------------------------------------
/tests/test.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 | 
3 | test('index page has expected h1', async ({ page }) => {
4 | 	await page.goto('/');
5 | 	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
6 | });
7 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true,
12 | 		"moduleResolution": "bundler"
13 | 	}
14 | 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
15 | 	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
16 | 	//
17 | 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
18 | 	// from the referenced tsconfig.json - TypeScript does not merge them in
19 | }
20 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { sveltekit } from '@sveltejs/kit/vite';
 2 | import { defineConfig } from 'vitest/config';
 3 | 
 4 | export default defineConfig({
 5 | 	plugins: [sveltekit()],
 6 | 	test: {
 7 | 		include: ['src/**/*.{test,spec}.{js,ts}']
 8 | 	}
 9 | });
10 | 


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