youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-24 17:33:51 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: format shadcn components

Browse source
This commit is contained in:
Youwen Wu 2024-04-04 15:34:04 -07:00
parent 7c483c7fdd
commit a6c261cb22
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
35 changed files with 284 additions and 286 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
.github/workflows/spelling.yml vendored
View file

@ -59,19 +59,19 @@ name: Check Spelling
on: on:
push: push:
branches: branches:
- "**" - '**'
tags-ignore: tags-ignore:
- "**" - '**'
pull_request_target: pull_request_target:
branches: branches:
- "**" - '**'
types: types:
- 'opened' - 'opened'
- 'reopened' - 'reopened'
- 'synchronize' - 'synchronize'
issue_comment: issue_comment:
types: types:
- 'created' - 'created'
jobs: jobs:
spelling: spelling:
@ -90,23 +90,22 @@ jobs:
# note: If you use only_check_changed_files, you do not want cancel-in-progress # note: If you use only_check_changed_files, you do not want cancel-in-progress
cancel-in-progress: true cancel-in-progress: true
steps: steps:
- name: check-spelling - name: check-spelling
id: spelling id: spelling
uses: check-spelling/check-spelling@main uses: check-spelling/check-spelling@main
with: with:
suppress_push_for_open_pull_request: ${{ github.actor != 'dependabot[bot]' && 1 }} suppress_push_for_open_pull_request: ${{ github.actor != 'dependabot[bot]' && 1 }}
checkout: true checkout: true
check_file_names: 1 check_file_names: 1
spell_check_this: check-spelling/spell-check-this@prerelease spell_check_this: check-spelling/spell-check-this@prerelease
post_comment: 0 post_comment: 0
use_magic_file: 1 use_magic_file: 1
report-timing: 1 report-timing: 1
warnings: bad-regex,binary-file,deprecated-feature,large-file,limited-references,no-newline-at-eof,noisy-file,non-alpha-in-dictionary,token-is-substring,unexpected-line-ending,whitespace-in-dictionary,minified-file,unsupported-configuration,no-files-to-check warnings: bad-regex,binary-file,deprecated-feature,large-file,limited-references,no-newline-at-eof,noisy-file,non-alpha-in-dictionary,token-is-substring,unexpected-line-ending,whitespace-in-dictionary,minified-file,unsupported-configuration,no-files-to-check
experimental_apply_changes_via_bot: 1 experimental_apply_changes_via_bot: 1
use_sarif: ${{ (!github.event.pull_request || (github.event.pull_request.head.repo.full_name == github.repository)) && 1 }} use_sarif: ${{ (!github.event.pull_request || (github.event.pull_request.head.repo.full_name == github.repository)) && 1 }}
extra_dictionary_limit: 20 extra_dictionary_limit: 20
extra_dictionaries: extra_dictionaries: cspell:software-terms/dict/softwareTerms.txt
cspell:software-terms/dict/softwareTerms.txt
comment-push: comment-push:
name: Report (Push) name: Report (Push)
@ -117,12 +116,12 @@ jobs:
contents: write contents: write
if: (success() || failure()) && needs.spelling.outputs.followup && github.event_name == 'push' if: (success() || failure()) && needs.spelling.outputs.followup && github.event_name == 'push'
steps: steps:
- name: comment - name: comment
uses: check-spelling/check-spelling@main uses: check-spelling/check-spelling@main
with: with:
checkout: true checkout: true
spell_check_this: check-spelling/spell-check-this@prerelease spell_check_this: check-spelling/spell-check-this@prerelease
task: ${{ needs.spelling.outputs.followup }} task: ${{ needs.spelling.outputs.followup }}
comment-pr: comment-pr:
name: Report (PR) name: Report (PR)
@ -134,13 +133,13 @@ jobs:
pull-requests: write pull-requests: write
if: (success() || failure()) && needs.spelling.outputs.followup && contains(github.event_name, 'pull_request') if: (success() || failure()) && needs.spelling.outputs.followup && contains(github.event_name, 'pull_request')
steps: steps:
- name: comment - name: comment
uses: check-spelling/check-spelling@main uses: check-spelling/check-spelling@main
with: with:
checkout: true checkout: true
spell_check_this: check-spelling/spell-check-this@prerelease spell_check_this: check-spelling/spell-check-this@prerelease
task: ${{ needs.spelling.outputs.followup }} task: ${{ needs.spelling.outputs.followup }}
experimental_apply_changes_via_bot: 1 experimental_apply_changes_via_bot: 1
update: update:
name: Update PR name: Update PR
@ -150,17 +149,17 @@ jobs:
actions: read actions: read
runs-on: ubuntu-latest runs-on: ubuntu-latest
if: ${{ if: ${{
github.event_name == 'issue_comment' && github.event_name == 'issue_comment' &&
github.event.issue.pull_request && github.event.issue.pull_request &&
contains(github.event.comment.body, '@check-spelling-bot apply') contains(github.event.comment.body, '@check-spelling-bot apply')
}} }}
concurrency: concurrency:
group: spelling-update-${{ github.event.issue.number }} group: spelling-update-${{ github.event.issue.number }}
cancel-in-progress: false cancel-in-progress: false
steps: steps:
- name: apply spelling updates - name: apply spelling updates
uses: check-spelling/check-spelling@main uses: check-spelling/check-spelling@main
with: with:
experimental_apply_changes_via_bot: 1 experimental_apply_changes_via_bot: 1
checkout: true checkout: true
ssh_key: "${{ secrets.CHECK_SPELLING }}" ssh_key: '${{ secrets.CHECK_SPELLING }}'

122
package.json
View file

@ -1,63 +1,63 @@
{ {
"name": "coredump", "name": "coredump",
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"test": "playwright test", "test": "playwright test",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .", "lint": "prettier --check . && eslint .",
"format": "prettier --write ." "format": "prettier --write ."
}, },
"devDependencies": { "devDependencies": {
"@faker-js/faker": "^8.4.1", "@faker-js/faker": "^8.4.1",
"@playwright/test": "^1.28.1", "@playwright/test": "^1.28.1",
"@sveltejs/kit": "^2.0.0", "@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/eslint": "^8.56.0", "@types/eslint": "^8.56.0",
"@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0", "@typescript-eslint/parser": "^7.0.0",
"autoprefixer": "^10.4.19", "autoprefixer": "^10.4.19",
"eslint": "^8.56.0", "eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1", "eslint-plugin-svelte": "^2.35.1",
"postcss": "^8.4.38", "postcss": "^8.4.38",
"prettier": "^3.1.1", "prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2", "prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.7", "svelte": "^4.2.7",
"svelte-check": "^3.6.0", "svelte-check": "^3.6.0",
"svelte-typewriter": "^3.2.3", "svelte-typewriter": "^3.2.3",
"tailwindcss": "^3.4.3", "tailwindcss": "^3.4.3",
"tslib": "^2.4.1", "tslib": "^2.4.1",
"typescript": "^5.0.0", "typescript": "^5.0.0",
"vite": "^5.0.3" "vite": "^5.0.3"
}, },
"type": "module", "type": "module",
"trustedDependencies": [ "trustedDependencies": [
"svelte-preprocess", "svelte-preprocess",
"@sveltejs/kit", "@sveltejs/kit",
"esbuild", "esbuild",
"@sveltejs/adapter-vercel" "@sveltejs/adapter-vercel"
], ],
"dependencies": { "dependencies": {
"@fontsource/geist-mono": "^5.0.2", "@fontsource/geist-mono": "^5.0.2",
"@fontsource/geist-sans": "^5.0.2", "@fontsource/geist-sans": "^5.0.2",
"@fontsource/merriweather": "^5.0.12", "@fontsource/merriweather": "^5.0.12",
"@fontsource/zilla-slab": "^5.0.12", "@fontsource/zilla-slab": "^5.0.12",
"@sveltejs/adapter-vercel": "^5.2.0", "@sveltejs/adapter-vercel": "^5.2.0",
"bits-ui": "^0.21.2", "bits-ui": "^0.21.2",
"clsx": "^2.1.0", "clsx": "^2.1.0",
"marked": "^12.0.1", "marked": "^12.0.1",
"marked-alert": "^2.0.1", "marked-alert": "^2.0.1",
"marked-katex-extension": "^5.0.1", "marked-katex-extension": "^5.0.1",
"mode-watcher": "^0.3.0", "mode-watcher": "^0.3.0",
"svelte-radix": "^1.1.0", "svelte-radix": "^1.1.0",
"svelte-sonner": "^0.3.21", "svelte-sonner": "^0.3.21",
"tailwind-merge": "^2.2.2", "tailwind-merge": "^2.2.2",
"tailwind-variants": "^0.2.1", "tailwind-variants": "^0.2.1",
"vaul-svelte": "^0.3.0" "vaul-svelte": "^0.3.0"
} }
} }

10
postcss.config.js
View file

@ -1,6 +1,6 @@
export default { export default {
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {}
}, }
} };

8
src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
View file

@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { buttonVariants } from "$lib/components/ui/button/index.js"; import { buttonVariants } from '$lib/components/ui/button/index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = AlertDialogPrimitive.ActionProps; type $$Props = AlertDialogPrimitive.ActionProps;
type $$Events = AlertDialogPrimitive.ActionEvents; type $$Events = AlertDialogPrimitive.ActionEvents;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export { className as class }; export { className as class };
</script> </script>

10
src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
View file

@ -1,17 +1,17 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { buttonVariants } from "$lib/components/ui/button/index.js"; import { buttonVariants } from '$lib/components/ui/button/index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = AlertDialogPrimitive.CancelProps; type $$Props = AlertDialogPrimitive.CancelProps;
type $$Events = AlertDialogPrimitive.CancelEvents; type $$Events = AlertDialogPrimitive.CancelEvents;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export { className as class }; export { className as class };
</script> </script>
<AlertDialogPrimitive.Cancel <AlertDialogPrimitive.Cancel
class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)} class={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
{...$$restProps} {...$$restProps}
on:click on:click
on:keydown on:keydown

14
src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import * as AlertDialog from "./index.js"; import * as AlertDialog from './index.js';
import { cn, flyAndScale } from "$lib/utils.js"; import { cn, flyAndScale } from '$lib/utils.js';
type $$Props = AlertDialogPrimitive.ContentProps; type $$Props = AlertDialogPrimitive.ContentProps;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export let transition: $$Props["transition"] = flyAndScale; export let transition: $$Props['transition'] = flyAndScale;
export let transitionConfig: $$Props["transitionConfig"] = undefined; export let transitionConfig: $$Props['transitionConfig'] = undefined;
export { className as class }; export { className as class };
</script> </script>
@ -17,7 +17,7 @@
{transition} {transition}
{transitionConfig} {transitionConfig}
class={cn( class={cn(
"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", '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',
className className
)} )}
{...$$restProps} {...$$restProps}

8
src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = AlertDialogPrimitive.DescriptionProps; type $$Props = AlertDialogPrimitive.DescriptionProps;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export { className as class }; export { className as class };
</script> </script>
<AlertDialogPrimitive.Description <AlertDialogPrimitive.Description
class={cn("text-sm text-muted-foreground", className)} class={cn('text-sm text-muted-foreground', className)}
{...$$restProps} {...$$restProps}
> >
<slot /> <slot />

8
src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export { className as class }; export { className as class };
</script> </script>
<div <div
class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
{...$$restProps} {...$$restProps}
> >
<slot /> <slot />

8
src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export { className as class }; export { className as class };
</script> </script>
<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}> <div class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...$$restProps}>
<slot /> <slot />
</div> </div>

16
src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
View file

@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { fade } from "svelte/transition"; import { fade } from 'svelte/transition';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = AlertDialogPrimitive.OverlayProps; type $$Props = AlertDialogPrimitive.OverlayProps;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export let transition: $$Props["transition"] = fade; export let transition: $$Props['transition'] = fade;
export let transitionConfig: $$Props["transitionConfig"] = { export let transitionConfig: $$Props['transitionConfig'] = {
duration: 150, duration: 150
}; };
export { className as class }; export { className as class };
</script> </script>
@ -16,6 +16,6 @@
<AlertDialogPrimitive.Overlay <AlertDialogPrimitive.Overlay
{transition} {transition}
{transitionConfig} {transitionConfig}
class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm", className)} class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
{...$$restProps} {...$$restProps}
/> />

2
src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
type $$Props = AlertDialogPrimitive.PortalProps; type $$Props = AlertDialogPrimitive.PortalProps;
</script> </script>

10
src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
View file

@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = AlertDialogPrimitive.TitleProps; type $$Props = AlertDialogPrimitive.TitleProps;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export let level: $$Props["level"] = "h3"; export let level: $$Props['level'] = 'h3';
export { className as class }; export { className as class };
</script> </script>
<AlertDialogPrimitive.Title class={cn("text-lg font-semibold", className)} {level} {...$$restProps}> <AlertDialogPrimitive.Title class={cn('text-lg font-semibold', className)} {level} {...$$restProps}>
<slot /> <slot />
</AlertDialogPrimitive.Title> </AlertDialogPrimitive.Title>

22
src/lib/components/ui/alert-dialog/index.ts
View file

@ -1,14 +1,14 @@
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import Title from "./alert-dialog-title.svelte"; import Title from './alert-dialog-title.svelte';
import Action from "./alert-dialog-action.svelte"; import Action from './alert-dialog-action.svelte';
import Cancel from "./alert-dialog-cancel.svelte"; import Cancel from './alert-dialog-cancel.svelte';
import Portal from "./alert-dialog-portal.svelte"; import Portal from './alert-dialog-portal.svelte';
import Footer from "./alert-dialog-footer.svelte"; import Footer from './alert-dialog-footer.svelte';
import Header from "./alert-dialog-header.svelte"; import Header from './alert-dialog-header.svelte';
import Overlay from "./alert-dialog-overlay.svelte"; import Overlay from './alert-dialog-overlay.svelte';
import Content from "./alert-dialog-content.svelte"; import Content from './alert-dialog-content.svelte';
import Description from "./alert-dialog-description.svelte"; import Description from './alert-dialog-description.svelte';
const Root = AlertDialogPrimitive.Root; const Root = AlertDialogPrimitive.Root;
const Trigger = AlertDialogPrimitive.Trigger; const Trigger = AlertDialogPrimitive.Trigger;
@ -36,5 +36,5 @@ export {
Trigger as AlertDialogTrigger, Trigger as AlertDialogTrigger,
Overlay as AlertDialogOverlay, Overlay as AlertDialogOverlay,
Content as AlertDialogContent, Content as AlertDialogContent,
Description as AlertDialogDescription, Description as AlertDialogDescription
}; };

8
src/lib/components/ui/badge/badge.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import { type Variant, badgeVariants } from "./index.js"; import { type Variant, badgeVariants } from './index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let className: string | undefined | null = undefined; let className: string | undefined | null = undefined;
export let href: string | undefined = undefined; export let href: string | undefined = undefined;
export let variant: Variant = "default"; export let variant: Variant = 'default';
export { className as class }; export { className as class };
</script> </script>
<svelte:element <svelte:element
this={href ? "a" : "span"} this={href ? 'a' : 'span'}
{href} {href}
class={cn(badgeVariants({ variant, className }))} class={cn(badgeVariants({ variant, className }))}
{...$$restProps} {...$$restProps}

24
src/lib/components/ui/badge/index.ts
View file

@ -1,22 +1,20 @@
import { type VariantProps, tv } from "tailwind-variants"; import { type VariantProps, tv } from 'tailwind-variants';
export { default as Badge } from "./badge.svelte"; export { default as Badge } from './badge.svelte';
export const badgeVariants = tv({ export const badgeVariants = tv({
base: "inline-flex select-none items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", base: 'inline-flex select-none items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
variants: { variants: {
variant: { variant: {
default: default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive: destructive:
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
outline: "text-foreground", outline: 'text-foreground'
}, }
}, },
defaultVariants: { defaultVariants: {
variant: "default", variant: 'default'
}, }
}); });
export type Variant = VariantProps<typeof badgeVariants>["variant"]; export type Variant = VariantProps<typeof badgeVariants>['variant'];

14
src/lib/components/ui/button/button.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import { Button as ButtonPrimitive } from "bits-ui"; import { Button as ButtonPrimitive } from 'bits-ui';
import { type Events, type Props, buttonVariants } from "./index.js"; import { type Events, type Props, buttonVariants } from './index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = Props; type $$Props = Props;
type $$Events = Events; type $$Events = Events;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export let variant: $$Props["variant"] = "default"; export let variant: $$Props['variant'] = 'default';
export let size: $$Props["size"] = "default"; export let size: $$Props['size'] = 'default';
export let builders: $$Props["builders"] = []; export let builders: $$Props['builders'] = [];
export { className as class }; export { className as class };
</script> </script>

8
src/lib/components/ui/card/card-content.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export { className as class }; export { className as class };
</script> </script>
<div class={cn("p-6 pt-0", className)} {...$$restProps}> <div class={cn('p-6 pt-0', className)} {...$$restProps}>
<slot /> <slot />
</div> </div>

8
src/lib/components/ui/card/card-description.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = HTMLAttributes<HTMLParagraphElement>; type $$Props = HTMLAttributes<HTMLParagraphElement>;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export { className as class }; export { className as class };
</script> </script>
<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}> <p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
<slot /> <slot />
</p> </p>

8
src/lib/components/ui/card/card-footer.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export { className as class }; export { className as class };
</script> </script>
<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}> <div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}>
<slot /> <slot />
</div> </div>

8
src/lib/components/ui/card/card-header.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export { className as class }; export { className as class };
</script> </script>
<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}> <div class={cn('flex flex-col space-y-1.5 p-6', className)} {...$$restProps}>
<slot /> <slot />
</div> </div>

12
src/lib/components/ui/card/card-title.svelte
View file

@ -1,20 +1,20 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import type { HeadingLevel } from "./index.js"; import type { HeadingLevel } from './index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = HTMLAttributes<HTMLHeadingElement> & { type $$Props = HTMLAttributes<HTMLHeadingElement> & {
tag?: HeadingLevel; tag?: HeadingLevel;
}; };
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export let tag: $$Props["tag"] = "h3"; export let tag: $$Props['tag'] = 'h3';
export { className as class }; export { className as class };
</script> </script>
<svelte:element <svelte:element
this={tag} this={tag}
class={cn("font-semibold leading-none tracking-tight", className)} class={cn('font-semibold leading-none tracking-tight', className)}
{...$$restProps} {...$$restProps}
> >
<slot /> <slot />

8
src/lib/components/ui/card/card.svelte
View file

@ -1,16 +1,16 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = HTMLAttributes<HTMLDivElement>; type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export { className as class }; export { className as class };
</script> </script>
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class={cn("rounded-xl border bg-card text-card-foreground shadow", className)} class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
{...$$restProps} {...$$restProps}
on:click on:click
on:focusin on:focusin

16
src/lib/components/ui/card/index.ts
View file

@ -1,9 +1,9 @@
import Root from "./card.svelte"; import Root from './card.svelte';
import Content from "./card-content.svelte"; import Content from './card-content.svelte';
import Description from "./card-description.svelte"; import Description from './card-description.svelte';
import Footer from "./card-footer.svelte"; import Footer from './card-footer.svelte';
import Header from "./card-header.svelte"; import Header from './card-header.svelte';
import Title from "./card-title.svelte"; import Title from './card-title.svelte';
export { export {
Root, Root,
@ -18,7 +18,7 @@ export {
Description as CardDescription, Description as CardDescription,
Footer as CardFooter, Footer as CardFooter,
Header as CardHeader, Header as CardHeader,
Title as CardTitle, Title as CardTitle
}; };
export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

6
src/lib/components/ui/popover/index.ts
View file

@ -1,5 +1,5 @@
import { Popover as PopoverPrimitive } from "bits-ui"; import { Popover as PopoverPrimitive } from 'bits-ui';
import Content from "./popover-content.svelte"; import Content from './popover-content.svelte';
const Root = PopoverPrimitive.Root; const Root = PopoverPrimitive.Root;
const Trigger = PopoverPrimitive.Trigger; const Trigger = PopoverPrimitive.Trigger;
const Close = PopoverPrimitive.Close; const Close = PopoverPrimitive.Close;
@ -13,5 +13,5 @@ export {
Root as Popover, Root as Popover,
Content as PopoverContent, Content as PopoverContent,
Trigger as PopoverTrigger, Trigger as PopoverTrigger,
Close as PopoverClose, Close as PopoverClose
}; };

16
src/lib/components/ui/popover/popover-content.svelte
View file

@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import { Popover as PopoverPrimitive } from "bits-ui"; import { Popover as PopoverPrimitive } from 'bits-ui';
import { cn, flyAndScale } from "$lib/utils.js"; import { cn, flyAndScale } from '$lib/utils.js';
type $$Props = PopoverPrimitive.ContentProps; type $$Props = PopoverPrimitive.ContentProps;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export let transition: $$Props["transition"] = flyAndScale; export let transition: $$Props['transition'] = flyAndScale;
export let transitionConfig: $$Props["transitionConfig"] = undefined; export let transitionConfig: $$Props['transitionConfig'] = undefined;
export let align: $$Props["align"] = "center"; export let align: $$Props['align'] = 'center';
export let sideOffset: $$Props["sideOffset"] = 4; export let sideOffset: $$Props['sideOffset'] = 4;
export { className as class }; export { className as class };
</script> </script>
@ -19,7 +19,7 @@
{sideOffset} {sideOffset}
{...$$restProps} {...$$restProps}
class={cn( class={cn(
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none", 'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
className className
)} )}
> >

6
src/lib/components/ui/scroll-area/index.ts
View file

@ -1,10 +1,10 @@
import Scrollbar from "./scroll-area-scrollbar.svelte"; import Scrollbar from './scroll-area-scrollbar.svelte';
import Root from "./scroll-area.svelte"; import Root from './scroll-area.svelte';
export { export {
Root, Root,
Scrollbar, Scrollbar,
//, //,
Root as ScrollArea, Root as ScrollArea,
Scrollbar as ScrollAreaScrollbar, Scrollbar as ScrollAreaScrollbar
}; };

18
src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
View file

@ -1,27 +1,27 @@
<script lang="ts"> <script lang="ts">
import { ScrollArea as ScrollAreaPrimitive } from "bits-ui"; import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = ScrollAreaPrimitive.ScrollbarProps & { type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
orientation?: "vertical" | "horizontal"; orientation?: 'vertical' | 'horizontal';
}; };
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export let orientation: $$Props["orientation"] = "vertical"; export let orientation: $$Props['orientation'] = 'vertical';
export { className as class }; export { className as class };
</script> </script>
<ScrollAreaPrimitive.Scrollbar <ScrollAreaPrimitive.Scrollbar
{orientation} {orientation}
class={cn( class={cn(
"flex touch-none select-none transition-colors", 'flex touch-none select-none transition-colors',
orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px", orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px", orientation === 'horizontal' && 'h-2.5 w-full border-t border-t-transparent p-px',
className className
)} )}
> >
<slot /> <slot />
<ScrollAreaPrimitive.Thumb <ScrollAreaPrimitive.Thumb
class={cn("relative rounded-full bg-border", orientation === "vertical" && "flex-1")} class={cn('relative rounded-full bg-border', orientation === 'vertical' && 'flex-1')}
/> />
</ScrollAreaPrimitive.Scrollbar> </ScrollAreaPrimitive.Scrollbar>

22
src/lib/components/ui/scroll-area/scroll-area.svelte
View file

@ -1,31 +1,31 @@
<script lang="ts"> <script lang="ts">
import { ScrollArea as ScrollAreaPrimitive } from "bits-ui"; import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
import { Scrollbar } from "./index.js"; import { Scrollbar } from './index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = ScrollAreaPrimitive.Props & { type $$Props = ScrollAreaPrimitive.Props & {
orientation?: "vertical" | "horizontal" | "both"; orientation?: 'vertical' | 'horizontal' | 'both';
scrollbarXClasses?: string; scrollbarXClasses?: string;
scrollbarYClasses?: string; scrollbarYClasses?: string;
}; };
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export { className as class }; export { className as class };
export let orientation = "vertical"; export let orientation = 'vertical';
export let scrollbarXClasses: string = ""; export let scrollbarXClasses: string = '';
export let scrollbarYClasses: string = ""; export let scrollbarYClasses: string = '';
</script> </script>
<ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}> <ScrollAreaPrimitive.Root {...$$restProps} class={cn('relative overflow-hidden', className)}>
<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]"> <ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
<ScrollAreaPrimitive.Content> <ScrollAreaPrimitive.Content>
<slot /> <slot />
</ScrollAreaPrimitive.Content> </ScrollAreaPrimitive.Content>
</ScrollAreaPrimitive.Viewport> </ScrollAreaPrimitive.Viewport>
{#if orientation === "vertical" || orientation === "both"} {#if orientation === 'vertical' || orientation === 'both'}
<Scrollbar orientation="vertical" class={scrollbarYClasses} /> <Scrollbar orientation="vertical" class={scrollbarYClasses} />
{/if} {/if}
{#if orientation === "horizontal" || orientation === "both"} {#if orientation === 'horizontal' || orientation === 'both'}
<Scrollbar orientation="horizontal" class={scrollbarXClasses} /> <Scrollbar orientation="horizontal" class={scrollbarXClasses} />
{/if} {/if}
<ScrollAreaPrimitive.Corner /> <ScrollAreaPrimitive.Corner />

4
src/lib/components/ui/separator/index.ts
View file

@ -1,7 +1,7 @@
import Root from "./separator.svelte"; import Root from './separator.svelte';
export { export {
Root, Root,
// //
Root as Separator, Root as Separator
}; };

14
src/lib/components/ui/separator/separator.svelte
View file

@ -1,19 +1,19 @@
<script lang="ts"> <script lang="ts">
import { Separator as SeparatorPrimitive } from "bits-ui"; import { Separator as SeparatorPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
type $$Props = SeparatorPrimitive.Props; type $$Props = SeparatorPrimitive.Props;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export let orientation: $$Props["orientation"] = "horizontal"; export let orientation: $$Props['orientation'] = 'horizontal';
export let decorative: $$Props["decorative"] = undefined; export let decorative: $$Props['decorative'] = undefined;
export { className as class }; export { className as class };
</script> </script>
<SeparatorPrimitive.Root <SeparatorPrimitive.Root
class={cn( class={cn(
"shrink-0 bg-border", 'shrink-0 bg-border',
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
className className
)} )}
{orientation} {orientation}

2
src/lib/components/ui/sonner/index.ts
View file

@ -1 +1 @@
export { default as Toaster } from "./sonner.svelte"; export { default as Toaster } from './sonner.svelte';

15
src/lib/components/ui/sonner/sonner.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner"; import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
import { mode } from "mode-watcher"; import { mode } from 'mode-watcher';
type $$Props = SonnerProps; type $$Props = SonnerProps;
</script> </script>
@ -10,11 +10,12 @@
class="toaster group" class="toaster group"
toastOptions={{ toastOptions={{
classes: { classes: {
toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg", toast:
description: "group-[.toast]:text-muted-foreground", 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground", description: 'group-[.toast]:text-muted-foreground',
cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground", actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
}, cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
}
}} }}
{...$$restProps} {...$$restProps}
/> />

6
src/lib/components/ui/tooltip/index.ts
View file

@ -1,5 +1,5 @@
import { Tooltip as TooltipPrimitive } from "bits-ui"; import { Tooltip as TooltipPrimitive } from 'bits-ui';
import Content from "./tooltip-content.svelte"; import Content from './tooltip-content.svelte';
const Root = TooltipPrimitive.Root; const Root = TooltipPrimitive.Root;
const Trigger = TooltipPrimitive.Trigger; const Trigger = TooltipPrimitive.Trigger;
@ -11,5 +11,5 @@ export {
// //
Root as Tooltip, Root as Tooltip,
Content as TooltipContent, Content as TooltipContent,
Trigger as TooltipTrigger, Trigger as TooltipTrigger
}; };

16
src/lib/components/ui/tooltip/tooltip-content.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import { Tooltip as TooltipPrimitive } from "bits-ui"; import { Tooltip as TooltipPrimitive } from 'bits-ui';
import { cn, flyAndScale } from "$lib/utils.js"; import { cn, flyAndScale } from '$lib/utils.js';
type $$Props = TooltipPrimitive.ContentProps; type $$Props = TooltipPrimitive.ContentProps;
let className: $$Props["class"] = undefined; let className: $$Props['class'] = undefined;
export let sideOffset: $$Props["sideOffset"] = 4; export let sideOffset: $$Props['sideOffset'] = 4;
export let transition: $$Props["transition"] = flyAndScale; export let transition: $$Props['transition'] = flyAndScale;
export let transitionConfig: $$Props["transitionConfig"] = { export let transitionConfig: $$Props['transitionConfig'] = {
y: 8, y: 8,
duration: 150, duration: 150
}; };
export { className as class }; export { className as class };
</script> </script>
@ -19,7 +19,7 @@
{transitionConfig} {transitionConfig}
{sideOffset} {sideOffset}
class={cn( class={cn(
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground", 'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground',
className className
)} )}
{...$$restProps} {...$$restProps}