trev/trevstack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 9 Activity

fix: remove checking buf until I can figure out how to not use buf.lock

Browse Source
This commit is contained in:
trev 2025-05-12 12:19:03 -04:00
parent bfc1580218
commit 95ce559ff3
107 changed files with 630 additions and 658 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
client/src/app.css
View File

@ -1,99 +1,99 @@
@import 'tailwindcss';
@import "tw-animate-css";
@import 'tw-animate-css';
@custom-variant dark (&:where(.dark, .dark *));
@theme inline {
--spacing-body: calc(100vh - 180px);
--spacing-body: calc(100vh - 180px);
--color-accent: var(--sky);
--color-accent: var(--sky);
--color-rosewater: var(--rosewater);
--color-flamingo: var(--flamingo);
--color-pink: var(--pink);
--color-mauve: var(--mauve);
--color-red: var(--red);
--color-maroon: var(--maroon);
--color-peach: var(--peach);
--color-yellow: var(--yellow);
--color-green: var(--green);
--color-teal: var(--teal);
--color-sky: var(--sky);
--color-sapphire: var(--sapphire);
--color-blue: var(--blue);
--color-lavender: var(--lavender);
--color-text: var(--text);
--color-subtext-1: var(--subtext-1);
--color-subtext: var(--subtext);
--color-overlay-2: var(--overlay-2);
--color-overlay-1: var(--overlay-1);
--color-overlay: var(--overlay);
--color-surface-2: var(--surface-2);
--color-surface-1: var(--surface-1);
--color-surface: var(--surface);
--color-based: var(--based);
--color-mantle: var(--mantle);
--color-crust: var(--crust);
--color-rosewater: var(--rosewater);
--color-flamingo: var(--flamingo);
--color-pink: var(--pink);
--color-mauve: var(--mauve);
--color-red: var(--red);
--color-maroon: var(--maroon);
--color-peach: var(--peach);
--color-yellow: var(--yellow);
--color-green: var(--green);
--color-teal: var(--teal);
--color-sky: var(--sky);
--color-sapphire: var(--sapphire);
--color-blue: var(--blue);
--color-lavender: var(--lavender);
--color-text: var(--text);
--color-subtext-1: var(--subtext-1);
--color-subtext: var(--subtext);
--color-overlay-2: var(--overlay-2);
--color-overlay-1: var(--overlay-1);
--color-overlay: var(--overlay);
--color-surface-2: var(--surface-2);
--color-surface-1: var(--surface-1);
--color-surface: var(--surface);
--color-based: var(--based);
--color-mantle: var(--mantle);
--color-crust: var(--crust);
}
@layer base {
:root {
--rosewater: hsl(11deg, 59%, 67%);
--flamingo: hsl(0deg, 60%, 67%);
--pink: hsl(316deg, 73%, 69%);
--mauve: hsl(266deg, 85%, 58%);
--red: hsl(347deg, 87%, 44%);
--maroon: hsl(355deg, 76%, 59%);
--peach: hsl(22deg, 99%, 52%);
--yellow: hsl(35deg, 77%, 49%);
--green: hsl(109deg, 58%, 40%);
--teal: hsl(183deg, 74%, 35%);
--sky: hsl(197deg, 97%, 46%);
--sapphire: hsl(189deg, 70%, 42%);
--blue: hsl(220deg, 91%, 54%);
--lavender: hsl(231deg, 97%, 72%);
--text: hsl(234deg, 16%, 35%);
--subtext-1: hsl(233deg, 13%, 41%);
--subtext: hsl(233deg, 10%, 47%);
--overlay-2: hsl(232deg, 10%, 53%);
--overlay-1: hsl(231deg, 10%, 59%);
--overlay: hsl(228deg, 11%, 65%);
--surface-2: hsl(227deg, 12%, 71%);
--surface-1: hsl(225deg, 14%, 77%);
--surface: hsl(223deg, 16%, 83%);
--based: hsl(220deg, 23%, 95%);
--mantle: hsl(220deg, 22%, 92%);
--crust: hsl(220deg, 21%, 89%);
}
:root {
--rosewater: hsl(11deg, 59%, 67%);
--flamingo: hsl(0deg, 60%, 67%);
--pink: hsl(316deg, 73%, 69%);
--mauve: hsl(266deg, 85%, 58%);
--red: hsl(347deg, 87%, 44%);
--maroon: hsl(355deg, 76%, 59%);
--peach: hsl(22deg, 99%, 52%);
--yellow: hsl(35deg, 77%, 49%);
--green: hsl(109deg, 58%, 40%);
--teal: hsl(183deg, 74%, 35%);
--sky: hsl(197deg, 97%, 46%);
--sapphire: hsl(189deg, 70%, 42%);
--blue: hsl(220deg, 91%, 54%);
--lavender: hsl(231deg, 97%, 72%);
--text: hsl(234deg, 16%, 35%);
--subtext-1: hsl(233deg, 13%, 41%);
--subtext: hsl(233deg, 10%, 47%);
--overlay-2: hsl(232deg, 10%, 53%);
--overlay-1: hsl(231deg, 10%, 59%);
--overlay: hsl(228deg, 11%, 65%);
--surface-2: hsl(227deg, 12%, 71%);
--surface-1: hsl(225deg, 14%, 77%);
--surface: hsl(223deg, 16%, 83%);
--based: hsl(220deg, 23%, 95%);
--mantle: hsl(220deg, 22%, 92%);
--crust: hsl(220deg, 21%, 89%);
}
.dark {
--rosewater: hsl(10deg, 56%, 91%);
--flamingo: hsl(0deg, 59%, 88%);
--pink: hsl(316deg, 72%, 86%);
--mauve: hsl(267deg, 84%, 81%);
--red: hsl(343deg, 81%, 75%);
--maroon: hsl(350deg, 65%, 77%);
--peach: hsl(23deg, 92%, 75%);
--yellow: hsl(41deg, 86%, 83%);
--green: hsl(115deg, 54%, 76%);
--teal: hsl(170deg, 57%, 73%);
--sky: hsl(189deg, 71%, 73%);
--sapphire: hsl(199deg, 76%, 69%);
--blue: hsl(217deg, 92%, 76%);
--lavender: hsl(232deg, 97%, 85%);
--text: hsl(226deg, 64%, 88%);
--subtext-1: hsl(227deg, 35%, 80%);
--subtext: hsl(228deg, 24%, 72%);
--overlay-2: hsl(228deg, 17%, 64%);
--overlay-1: hsl(230deg, 13%, 55%);
--overlay: hsl(231deg, 11%, 47%);
--surface-2: hsl(233deg, 12%, 39%);
--surface-1: hsl(234deg, 13%, 31%);
--surface: hsl(237deg, 16%, 23%);
--based: hsl(240deg, 21%, 15%);
--mantle: hsl(240deg, 21%, 12%);
--crust: hsl(240deg, 23%, 9%);
}
.dark {
--rosewater: hsl(10deg, 56%, 91%);
--flamingo: hsl(0deg, 59%, 88%);
--pink: hsl(316deg, 72%, 86%);
--mauve: hsl(267deg, 84%, 81%);
--red: hsl(343deg, 81%, 75%);
--maroon: hsl(350deg, 65%, 77%);
--peach: hsl(23deg, 92%, 75%);
--yellow: hsl(41deg, 86%, 83%);
--green: hsl(115deg, 54%, 76%);
--teal: hsl(170deg, 57%, 73%);
--sky: hsl(189deg, 71%, 73%);
--sapphire: hsl(199deg, 76%, 69%);
--blue: hsl(217deg, 92%, 76%);
--lavender: hsl(232deg, 97%, 85%);
--text: hsl(226deg, 64%, 88%);
--subtext-1: hsl(227deg, 35%, 80%);
--subtext: hsl(228deg, 24%, 72%);
--overlay-2: hsl(228deg, 17%, 64%);
--overlay-1: hsl(230deg, 13%, 55%);
--overlay: hsl(231deg, 11%, 47%);
--surface-2: hsl(233deg, 12%, 39%);
--surface-1: hsl(234deg, 13%, 31%);
--surface: hsl(237deg, 16%, 23%);
--based: hsl(240deg, 21%, 15%);
--mantle: hsl(240deg, 21%, 12%);
--crust: hsl(240deg, 23%, 9%);
}
}
/*
@ -102,4 +102,4 @@
Focus Outline: blue
Border: surface-1
Hover: bump color by 2 (eg crust -> based), if accent color drop opacity (eg blue -> blue/90)
*/
*/

8
client/src/lib/coolforms/conststate.svelte.ts
View File

@ -1,7 +1,5 @@
export function newState<T>(s: T) {
const state = $state(s);
const state = $state(s);
return state;
}
return state;
}

294
client/src/lib/coolforms/coolforms.svelte.ts
View File

@ -1,175 +1,181 @@
import { create, type DescMessage, type DescService, type MessageShape, type MessageInitShape } from "@bufbuild/protobuf";
import { ValidationError, type Violation } from "@bufbuild/protovalidate";
import { Validator } from "../transport";
import { ConnectError, type Client } from "@connectrpc/connect";
import type { Action } from "svelte/action";
import {
create,
type DescMessage,
type DescService,
type MessageShape,
type MessageInitShape
} from '@bufbuild/protobuf';
import { ValidationError, type Violation } from '@bufbuild/protovalidate';
import { Validator } from '../transport';
import { ConnectError, type Client } from '@connectrpc/connect';
import type { Action } from 'svelte/action';
type Options<Input extends DescMessage, Output extends DescMessage> = {
init?: MessageInitShape<Input>,
start?: boolean,
reset?: boolean,
onSubmit?: (formData: FormData, input: MessageShape<Input>) => Promise<MessageShape<Input>>,
onResult?: (result: MessageShape<Output>) => void,
onError?: (err: Violation[] | ConnectError) => void
}
type Violations<Field> = {
[field in keyof Field]?: Violation[];
init?: MessageInitShape<Input>;
start?: boolean;
reset?: boolean;
onSubmit?: (formData: FormData, input: MessageShape<Input>) => Promise<MessageShape<Input>>;
onResult?: (result: MessageShape<Output>) => void;
onError?: (err: Violation[] | ConnectError) => void;
};
export function coolForm<
Service extends DescService,
Method extends Service['methods'][number]
>(
client: Client<Service>,
method: Method,
options?: Options<Method['input'], Method['output']>
type Violations<Field> = {
[field in keyof Field]?: Violation[];
};
export function coolForm<Service extends DescService, Method extends Service['methods'][number]>(
client: Client<Service>,
method: Method,
options?: Options<Method['input'], Method['output']>
) {
const input = $state(create(method.input as Method['input'], options?.init));
const output = $state(create(method.output as Method['output']));
const errors: Violations<Method['input']['field']> & {
form?: ConnectError
} = $state({});
let loading = $state(false);
const input = $state(create(method.input as Method['input'], options?.init));
const output = $state(create(method.output as Method['output']));
const errors: Violations<Method['input']['field']> & {
form?: ConnectError;
} = $state({});
let loading = $state(false);
const validate = () => {
// Delete existing errors
for (const key in errors) {
delete errors[key];
}
const validate = () => {
// Delete existing errors
for (const key in errors) {
delete errors[key];
}
try {
Validator.validate(method['input'], input);
} catch (e) {
if (!(e instanceof ValidationError)) {
throw e;
}
try {
Validator.validate(method['input'], input);
} catch (e) {
if (!(e instanceof ValidationError)) {
throw e;
}
// Map violation errors to errors rune
for (const violation of e.violations) {
for (const field of violation.field) {
if (!("localName" in field)) {
continue;
}
// Map violation errors to errors rune
for (const violation of e.violations) {
for (const field of violation.field) {
if (!('localName' in field)) {
continue;
}
// Create localName property if it doesn't exist
if (!errors[field.localName]) {
Object.assign(errors, {
[field.localName]: [violation]
})
} else {
errors[field.localName]?.push(violation);
}
}
}
// Create localName property if it doesn't exist
if (!errors[field.localName]) {
Object.assign(errors, {
[field.localName]: [violation]
});
} else {
errors[field.localName]?.push(violation);
}
}
}
return e.violations;
}
return e.violations;
}
return [];
};
return [];
};
// When a request is successful
const success = (response: MessageShape<Method['output']>) => {
loading = false;
// When a request is successful
const success = (response: MessageShape<Method['output']>) => {
loading = false;
// Send the response up
options?.onResult?.(response);
// Send the response up
options?.onResult?.(response);
// Set the response
Object.assign(output, response);
// Set the response
Object.assign(output, response);
// If we want to reset the input
if (options && (options.reset == undefined || options.reset)) {
const cleared = create(method.input as Method['input'], options?.init)
Object.assign(input, cleared);
}
}
// If we want to reset the input
if (options && (options.reset == undefined || options.reset)) {
const cleared = create(method.input as Method['input'], options?.init);
Object.assign(input, cleared);
}
};
// When a request fails
const fail = (err: Violation[] | ConnectError | any) => {
loading = false;
// When a request fails
const fail = (err: Violation[] | ConnectError | Error) => {
loading = false;
// It's a Violation[]
if (Array.isArray(err)) {
// Send the error up
options?.onError?.(err);
return;
}
// It's a Violation[]
if (Array.isArray(err)) {
// Send the error up
options?.onError?.(err);
return;
}
// It's a ConnectError
if (err instanceof ConnectError) {
// Assign it to the form
errors.form = err;
// It's a ConnectError
if (err instanceof ConnectError) {
// Assign it to the form
errors.form = err;
// Send the error up
options?.onError?.(err);
return;
}
// Send the error up
options?.onError?.(err);
return;
}
throw err;
}
throw err;
};
const submit = () => {
loading = true;
const submit = () => {
loading = true;
// Validate
const validationErrors = validate();
if (validationErrors.length > 0) {
fail(validationErrors);
return;
}
// Validate
const validationErrors = validate();
if (validationErrors.length > 0) {
fail(validationErrors);
return;
}
// Send response
if (method.methodKind == "unary") {
// @ts-ignore I can't figure out how to make this typescript compliant
const response = client[method.localName]($state.snapshot(input)) as Promise<MessageShape<Method['output']>>
// Send response
if (method.methodKind == 'unary') {
// @ts-expect-error I can't figure out how to make this typescript compliant
const response = client[method.localName]($state.snapshot(input)) as Promise<
MessageShape<Method['output']>
>;
response
.then((resp) => {
success(resp);
}).catch(err => {
fail(err);
});
}
}
response
.then((resp) => {
success(resp);
})
.catch((err) => {
fail(err);
});
}
};
// A nice action to give to forms to run submit() on submit
const impair: Action<HTMLFormElement> = (form) => {
$effect(() => {
form.onsubmit = (event) => {
event.preventDefault();
// A nice action to give to forms to run submit() on submit
const impair: Action<HTMLFormElement> = (form) => {
$effect(() => {
form.onsubmit = (event) => {
event.preventDefault();
if (options?.onSubmit) {
const formData = new FormData(form);
options.onSubmit(formData, input).then((i) => {
Object.assign(input, i);
submit();
});
if (options?.onSubmit) {
const formData = new FormData(form);
options.onSubmit(formData, input).then((i) => {
Object.assign(input, i);
submit();
});
return;
}
return;
}
submit();
}
submit();
};
return () => {
form.onsubmit = () => { };
};
});
};
return () => {
form.onsubmit = () => {};
};
});
};
if (options?.start) {
submit();
}
if (options?.start) {
submit();
}
return {
input,
output,
errors,
loading: () => loading,
submit,
validate,
impair
}
}
return {
input,
output,
errors,
loading: () => loading,
submit,
validate,
impair
};
}

9
client/src/lib/coolforms/index.ts
View File

@ -1,7 +1,4 @@
import { coolForm } from "./coolforms.svelte";
import { newState } from "./conststate.svelte";
import { coolForm } from './coolforms.svelte';
import { newState } from './conststate.svelte';
export {
coolForm,
newState
};
export { coolForm, newState };

7
client/src/lib/transport.ts
View File

@ -1,5 +1,5 @@
import { createConnectTransport } from '@connectrpc/connect-web';
import { createValidator } from "@bufbuild/protovalidate";
import { createValidator } from '@bufbuild/protovalidate';
import { Code, ConnectError, createClient, type Interceptor } from '@connectrpc/connect';
import { AuthService } from '$lib/connect/user/v1/auth_pb';
import { UserService } from '$lib/connect/user/v1/user_pb';
@ -15,7 +15,10 @@ const redirector: Interceptor = (next) => async (req) => {
if (error.code === Code.Unauthenticated) {
const redirectURL = new URL(page.url);
redirectURL.pathname = '/auth';
redirectURL.searchParams.append('redir', encodeURIComponent(page.url.pathname + page.url.search));
redirectURL.searchParams.append(
'redir',
encodeURIComponent(page.url.pathname + page.url.search)
);
await goto(redirectURL);
}

2
client/src/lib/ui/avatar/avatar-fallback.svelte
View File

@ -13,7 +13,7 @@
bind:ref
data-slot="avatar-fallback"
class={cn(
'bg-surface outline-surface-2 flex size-full select-none items-center justify-center rounded-full text-sm transition-all',
'bg-surface outline-surface-2 flex size-full items-center justify-center rounded-full text-sm transition-all select-none',
className
)}
{...restProps}

6
client/src/lib/ui/avatar/avatar-image.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { Avatar as AvatarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { Avatar as AvatarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -12,6 +12,6 @@
<AvatarPrimitive.Image
bind:ref
data-slot="avatar-image"
class={cn("aspect-square size-full", className)}
class={cn('aspect-square size-full', className)}
{...restProps}
/>

9
client/src/lib/ui/avatar/avatar.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { Avatar as AvatarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { Avatar as AvatarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -12,6 +12,9 @@
<AvatarPrimitive.Root
bind:ref
data-slot="avatar"
class={cn("relative outline outline-offset-2 outline-surface-1 flex size-9 shrink-0 overflow-hidden rounded-full", className)}
class={cn(
'outline-surface-1 relative flex size-9 shrink-0 overflow-hidden rounded-full outline outline-offset-2',
className
)}
{...restProps}
/>

8
client/src/lib/ui/avatar/index.ts
View File

@ -1,6 +1,6 @@
import Root from "./avatar.svelte";
import Image from "./avatar-image.svelte";
import Fallback from "./avatar-fallback.svelte";
import Root from './avatar.svelte';
import Image from './avatar-image.svelte';
import Fallback from './avatar-fallback.svelte';
export {
Root,
@ -9,5 +9,5 @@ export {
//
Root as Avatar,
Image as AvatarImage,
Fallback as AvatarFallback,
Fallback as AvatarFallback
};

10
client/src/lib/ui/button/button.svelte
View File

@ -7,7 +7,7 @@
export const buttonVariants = tv({
base: cn(
'shadow-xs inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all',
'inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap shadow-xs transition-all',
// Focus
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
@ -16,14 +16,14 @@
'disabled:pointer-events-none disabled:opacity-50',
// Images
"[&_svg:not([class*='size-'])]:size-5 [&_svg]:pointer-events-none [&_svg]:shrink-0"
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5"
),
variants: {
variant: {
default: 'text-crust bg-accent hover:bg-accent/90 shadow-xs',
red: 'text-crust bg-red hover:bg-red/90 shadow-xs',
outline: 'text-text border-surface-1 hover:bg-surface shadow-xs border bg-transparent',
input: 'text-text border-surface-1 hover:border-overlay shadow-xs border bg-transparent',
outline: 'text-text border-surface-1 hover:bg-surface border bg-transparent shadow-xs',
input: 'text-text border-surface-1 hover:border-overlay border bg-transparent shadow-xs',
ghost: 'text-text hover:bg-surface shadow-xs'
},
size: {
@ -47,7 +47,6 @@
variant?: ButtonVariant;
size?: ButtonSize;
loading?: boolean;
scan?: boolean;
};
</script>
@ -60,7 +59,6 @@
href = undefined,
type = 'button',
loading,
scan,
children,
...restProps
}: ButtonProps = $props();

8
client/src/lib/ui/button/index.ts
View File

@ -2,8 +2,8 @@ import Root, {
type ButtonProps,
type ButtonSize,
type ButtonVariant,
buttonVariants,
} from "./button.svelte";
buttonVariants
} from './button.svelte';
export {
Root,
@ -13,5 +13,5 @@ export {
buttonVariants,
type ButtonProps,
type ButtonSize,
type ButtonVariant,
};
type ButtonVariant
};

6
client/src/lib/ui/card/index.ts
View File

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

2
client/src/lib/ui/daterangepicker/daterangepicker.svelte
View File

@ -58,7 +58,7 @@
Pick a date range
{/if}
</Popover.Trigger>
<Popover.Content class="w-auto p-0 bg-based" align="start">
<Popover.Content class="bg-based w-auto p-0" align="start">
<RangeCalendar
bind:value
onStartValueChange={(v) => {

7
client/src/lib/ui/daterangepicker/index.ts
View File

@ -1,6 +1,3 @@
import Root from "./daterangepicker.svelte";
import Root from './daterangepicker.svelte';
export {
Root,
Root as DateRangePicker
};
export { Root, Root as DateRangePicker };

2
client/src/lib/ui/dialog/dialog-close.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { Dialog as DialogPrimitive } from "bits-ui";
import { Dialog as DialogPrimitive } from 'bits-ui';
let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
</script>

2
client/src/lib/ui/dialog/dialog-content.svelte
View File

@ -34,7 +34,7 @@
{@render children?.()}
<DialogPrimitive.Close
class={cn(
'text-text absolute top-4 right-4 cursor-pointer p-1 rounded hover:bg-crust transition-all disabled:pointer-events-none',
'text-text hover:bg-crust absolute top-4 right-4 cursor-pointer rounded p-1 transition-all disabled:pointer-events-none',
// Focus
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',

6
client/src/lib/ui/dialog/dialog-description.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { Dialog as DialogPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { Dialog as DialogPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -12,6 +12,6 @@
<DialogPrimitive.Description
bind:ref
data-slot="dialog-description"
class={cn("text-muted-foreground text-sm", className)}
class={cn('text-muted-foreground text-sm', className)}
{...restProps}
/>

8
client/src/lib/ui/dialog/dialog-footer.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { WithElementRef } from "bits-ui";
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -14,7 +14,7 @@
<div
bind:this={ref}
data-slot="dialog-footer"
class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
{...restProps}
>
{@render children?.()}

8
client/src/lib/ui/dialog/dialog-header.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import type { WithElementRef } from "bits-ui";
import { cn } from "$lib/utils.js";
import type { HTMLAttributes } from 'svelte/elements';
import type { WithElementRef } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -14,7 +14,7 @@
<div
bind:this={ref}
data-slot="dialog-header"
class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
class={cn('flex flex-col gap-2 text-center sm:text-left', className)}
{...restProps}
>
{@render children?.()}

6
client/src/lib/ui/dialog/dialog-overlay.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { Dialog as DialogPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { Dialog as DialogPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -13,7 +13,7 @@
bind:ref
data-slot="dialog-overlay"
class={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
className
)}
{...restProps}

6
client/src/lib/ui/dialog/dialog-title.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { Dialog as DialogPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { Dialog as DialogPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -12,6 +12,6 @@
<DialogPrimitive.Title
bind:ref
data-slot="dialog-title"
class={cn("text-lg font-semibold leading-none", className)}
class={cn('text-lg leading-none font-semibold', className)}
{...restProps}
/>

2
client/src/lib/ui/dialog/dialog-trigger.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { Dialog as DialogPrimitive } from "bits-ui";
import { Dialog as DialogPrimitive } from 'bits-ui';
let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
</script>

20
client/src/lib/ui/dialog/index.ts
View File

@ -1,14 +1,14 @@
import { Dialog as DialogPrimitive } from "bits-ui";
import { Dialog as DialogPrimitive } from 'bits-ui';
import Root from './dialog.svelte';
import Title from "./dialog-title.svelte";
import Footer from "./dialog-footer.svelte";
import Header from "./dialog-header.svelte";
import Overlay from "./dialog-overlay.svelte";
import Content from "./dialog-content.svelte";
import Description from "./dialog-description.svelte";
import Trigger from "./dialog-trigger.svelte";
import Close from "./dialog-close.svelte";
import Title from './dialog-title.svelte';
import Footer from './dialog-footer.svelte';
import Header from './dialog-header.svelte';
import Overlay from './dialog-overlay.svelte';
import Content from './dialog-content.svelte';
import Description from './dialog-description.svelte';
import Trigger from './dialog-trigger.svelte';
import Close from './dialog-close.svelte';
const Portal = DialogPrimitive.Portal;
@ -33,5 +33,5 @@ export {
Overlay as DialogOverlay,
Content as DialogContent,
Description as DialogDescription,
Close as DialogClose,
Close as DialogClose
};

18
client/src/lib/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
View File

@ -1,9 +1,9 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui";
import Check from "@lucide/svelte/icons/check";
import Minus from "@lucide/svelte/icons/minus";
import { cn } from "$lib/utils.js";
import type { Snippet } from "svelte";
import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
import Check from '@lucide/svelte/icons/check';
import Minus from '@lucide/svelte/icons/minus';
import { cn } from '$lib/utils.js';
import type { Snippet } from 'svelte';
let {
ref = $bindable(null),
@ -23,13 +23,13 @@
bind:indeterminate
data-slot="dropdown-menu-checkbox-item"
class={cn(
"focus:bg-surface outline-hidden relative flex cursor-pointer select-none items-center gap-2 rounded-sm py-2 pl-8 pr-2 text-sm",
'focus:bg-surface relative flex cursor-pointer items-center gap-2 rounded-sm py-2 pr-2 pl-8 text-sm outline-hidden select-none',
// Disabled
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
// Images
"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...restProps}
@ -39,7 +39,7 @@
{#if indeterminate}
<Minus class="size-4" />
{:else}
<Check class={cn("size-4", !checked && "text-transparent")} />
<Check class={cn('size-4', !checked && 'text-transparent')} />
{/if}
</span>
{@render childrenProp?.()}

2
client/src/lib/ui/dropdown-menu/dropdown-menu-group.svelte
View File

@ -12,6 +12,6 @@
<DropdownMenuPrimitive.Group
bind:ref
data-slot="dropdown-menu-group"
class={cn('border-b border-surface first:pt-0 last:pb-0 last:border-none', className)}
class={cn('border-surface border-b first:pt-0 last:border-none last:pb-0', className)}
{...restProps}
/>

8
client/src/lib/ui/dropdown-menu/dropdown-menu-label.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { cn } from "$lib/utils.js";
import { type WithElementRef } from "bits-ui";
import type { HTMLAttributes } from "svelte/elements";
import { cn } from '$lib/utils.js';
import { type WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from 'svelte/elements';
let {
ref = $bindable(null),
@ -17,7 +17,7 @@
<div
bind:this={ref}
data-slot="dropdown-menu-label"
class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
{...restProps}
>
{@render children?.()}

2
client/src/lib/ui/dropdown-menu/dropdown-menu-radio-group.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
let {
ref = $bindable(null),

4
client/src/lib/ui/dropdown-menu/dropdown-menu-radio-item.svelte
View File

@ -15,10 +15,10 @@
bind:ref
data-slot="dropdown-menu-radio-item"
class={cn(
"focus:bg-surface text-text relative flex cursor-pointer items-center gap-2 py-2 pr-2 pl-8 text-sm select-none",
'focus:bg-surface text-text relative flex cursor-pointer items-center gap-2 py-2 pr-2 pl-8 text-sm select-none',
// Disabled
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
// Images
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

6
client/src/lib/ui/dropdown-menu/dropdown-menu-separator.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -12,6 +12,6 @@
<DropdownMenuPrimitive.Separator
bind:ref
data-slot="dropdown-menu-separator"
class={cn("bg-surface-1 -mx-1 my-1 h-px", className)}
class={cn('bg-surface-1 -mx-1 my-1 h-px', className)}
{...restProps}
/>

8
client/src/lib/ui/dropdown-menu/dropdown-menu-shortcut.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { type WithElementRef } from "bits-ui";
import { cn } from "$lib/utils.js";
import type { HTMLAttributes } from 'svelte/elements';
import { type WithElementRef } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -14,7 +14,7 @@
<span
bind:this={ref}
data-slot="dropdown-menu-shortcut"
class={cn("text-text ml-auto text-xs tracking-widest", className)}
class={cn('text-text ml-auto text-xs tracking-widest', className)}
{...restProps}
>
{@render children?.()}

2
client/src/lib/ui/dropdown-menu/dropdown-menu-sub-content.svelte
View File

@ -13,7 +13,7 @@
bind:ref
data-slot="dropdown-menu-sub-content"
class={cn(
'bg-based text-text origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
'bg-based text-text z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
// Animations
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

10
client/src/lib/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import ChevronRight from "@lucide/svelte/icons/chevron-right";
import { cn } from "$lib/utils.js";
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import ChevronRight from '@lucide/svelte/icons/chevron-right';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -18,8 +18,8 @@
bind:ref
data-slot="dropdown-menu-sub-trigger"
class={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm",
inset && "pl-8",
'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none',
inset && 'pl-8',
className
)}
{...restProps}

2
client/src/lib/ui/dropdown-menu/dropdown-menu-trigger.svelte
View File

@ -14,7 +14,7 @@
data-slot="dropdown-menu-trigger"
class={cn(
'flex cursor-pointer items-center gap-1 transition-all',
// Focus
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
className

28
client/src/lib/ui/dropdown-menu/index.ts
View File

@ -1,17 +1,17 @@
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
import Content from "./dropdown-menu-content.svelte";
import Group from "./dropdown-menu-group.svelte";
import Item from "./dropdown-menu-item.svelte";
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
import Content from './dropdown-menu-content.svelte';
import Group from './dropdown-menu-group.svelte';
import Item from './dropdown-menu-item.svelte';
import Link from './dropdown-menu-link.svelte';
import Label from "./dropdown-menu-label.svelte";
import RadioGroup from "./dropdown-menu-radio-group.svelte";
import RadioItem from "./dropdown-menu-radio-item.svelte";
import Separator from "./dropdown-menu-separator.svelte";
import Shortcut from "./dropdown-menu-shortcut.svelte";
import Trigger from "./dropdown-menu-trigger.svelte";
import SubContent from "./dropdown-menu-sub-content.svelte";
import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
import Label from './dropdown-menu-label.svelte';
import RadioGroup from './dropdown-menu-radio-group.svelte';
import RadioItem from './dropdown-menu-radio-item.svelte';
import Separator from './dropdown-menu-separator.svelte';
import Shortcut from './dropdown-menu-shortcut.svelte';
import Trigger from './dropdown-menu-trigger.svelte';
import SubContent from './dropdown-menu-sub-content.svelte';
import SubTrigger from './dropdown-menu-sub-trigger.svelte';
const Sub = DropdownMenuPrimitive.Sub;
const Root = DropdownMenuPrimitive.Root;
@ -46,5 +46,5 @@ export {
Sub,
SubContent,
SubTrigger,
Trigger,
Trigger
};

38
client/src/lib/ui/form/context.svelte.ts
View File

@ -1,31 +1,31 @@
import { getContext, hasContext, setContext } from 'svelte';
type Item = {
id: string;
name: string;
}
id: string;
name: string;
};
const key = 'form';
export function setFormContext(id: string, name: string) {
const item = getFormContext();
if (!item) {
const item: Item = $state({
id,
name,
});
setContext(key, item);
const item = getFormContext();
if (!item) {
const item: Item = $state({
id,
name
});
setContext(key, item);
return;
}
return;
}
item.id = id;
item.name = name;
item.id = id;
item.name = name;
}
export function getFormContext() {
if (!hasContext(key)) {
return null;
}
if (!hasContext(key)) {
return null;
}
return getContext(key) as Item;
}
return getContext(key) as Item;
}

2
client/src/lib/ui/form/errors.svelte
View File

@ -21,7 +21,7 @@
<div bind:this={ref} class={cn('text-red text-sm', className)} {...restProps}>
{#if errors && Array.isArray(errors)}
{#each errors as error}
{#each errors as error (error)}
<label for={item?.id}>{error.message}</label>
{/each}
{:else if errors}

2
client/src/lib/ui/form/field.svelte
View File

@ -16,6 +16,6 @@
}
</script>
<div bind:this={ref} class={cn('flex flex-col gap-1')} {...restProps}>
<div bind:this={ref} class={cn('flex flex-col gap-1', className)} {...restProps}>
{@render children?.()}
</div>

6
client/src/lib/ui/form/index.ts
View File

@ -2,8 +2,4 @@ import Field from './field.svelte';
import Errors from './errors.svelte';
import Label from './label.svelte';
export {
Field,
Errors,
Label
};
export { Field, Errors, Label };

6
client/src/lib/ui/input/index.ts
View File

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

9
client/src/lib/ui/input/input.svelte
View File

@ -8,9 +8,7 @@
type Props = WithElementRef<
Omit<HTMLInputAttributes, 'type'> &
({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined }) & {
scan?: boolean;
}
({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
>;
let {
@ -19,7 +17,6 @@
type,
files = $bindable(),
class: className,
scan,
id,
name,
...restProps
@ -40,7 +37,7 @@
{name}
bind:this={ref}
class={cn(
'border-surface-1 file:bg-surface hover:border-overlay placeholder:text-subtext text-text shadow-xs flex h-9 w-full min-w-0 cursor-pointer rounded-md border text-sm font-medium transition-all file:mr-2 file:px-3 file:py-2 md:text-sm',
'border-surface-1 file:bg-surface hover:border-overlay placeholder:text-subtext text-text flex h-9 w-full min-w-0 cursor-pointer rounded-md border text-sm font-medium shadow-xs transition-all file:mr-2 file:px-3 file:py-2 md:text-sm',
// Focus
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
@ -61,7 +58,7 @@
{name}
bind:this={ref}
class={cn(
'border-surface-1 hover:border-overlay placeholder:text-subtext text-text shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 transition-all md:text-sm',
'border-surface-1 hover:border-overlay placeholder:text-subtext text-text flex h-9 w-full min-w-0 rounded-md border px-3 py-1 shadow-xs transition-all md:text-sm',
// Focus
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',

4
client/src/lib/ui/label/index.ts
View File

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

2
client/src/lib/ui/label/label.svelte
View File

@ -13,7 +13,7 @@
bind:ref
data-slot="label"
class={cn(
'flex items-center gap-2 text-sm text-text leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
'text-text flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
className
)}
{...restProps}

6
client/src/lib/ui/pager/index.ts
View File

@ -1,5 +1,3 @@
import Pager from './pager.svelte'
import Pager from './pager.svelte';
export {
Pager
}
export { Pager };

16
client/src/lib/ui/pagination/index.ts
View File

@ -1,10 +1,10 @@
import Root from "./pagination.svelte";
import Content from "./pagination-content.svelte";
import Item from "./pagination-item.svelte";
import Link from "./pagination-link.svelte";
import PrevButton from "./pagination-prev-button.svelte";
import NextButton from "./pagination-next-button.svelte";
import Ellipsis from "./pagination-ellipsis.svelte";
import Root from './pagination.svelte';
import Content from './pagination-content.svelte';
import Item from './pagination-item.svelte';
import Link from './pagination-link.svelte';
import PrevButton from './pagination-prev-button.svelte';
import NextButton from './pagination-next-button.svelte';
import Ellipsis from './pagination-ellipsis.svelte';
export {
Root,
@ -21,5 +21,5 @@ export {
Link as PaginationLink,
PrevButton as PaginationPrevButton,
NextButton as PaginationNextButton,
Ellipsis as PaginationEllipsis,
Ellipsis as PaginationEllipsis
};

8
client/src/lib/ui/pagination/pagination-content.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import type { WithElementRef } from "bits-ui";
import { cn } from "$lib/utils.js";
import type { HTMLAttributes } from 'svelte/elements';
import type { WithElementRef } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -14,7 +14,7 @@
<ul
bind:this={ref}
data-slot="pagination-content"
class={cn("flex flex-row items-center gap-1", className)}
class={cn('flex flex-row items-center gap-1', className)}
{...restProps}
>
{@render children?.()}

10
client/src/lib/ui/pagination/pagination-ellipsis.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
import Ellipsis from "@lucide/svelte/icons/ellipsis";
import type { WithElementRef, WithoutChildren } from "bits-ui";
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
import Ellipsis from '@lucide/svelte/icons/ellipsis';
import type { WithElementRef, WithoutChildren } from 'bits-ui';
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -15,7 +15,7 @@
bind:this={ref}
aria-hidden="true"
data-slot="pagination-ellipsis"
class={cn("flex size-9 items-center justify-center text-text", className)}
class={cn('text-text flex size-9 items-center justify-center', className)}
{...restProps}
>
<Ellipsis class="size-4" />

4
client/src/lib/ui/pagination/pagination-item.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import type { HTMLLiAttributes } from "svelte/elements";
import type { WithElementRef } from "bits-ui";
import type { HTMLLiAttributes } from 'svelte/elements';
import type { WithElementRef } from 'bits-ui';
let {
ref = $bindable(null),

14
client/src/lib/ui/pagination/pagination-link.svelte
View File

@ -1,12 +1,12 @@
<script lang="ts">
import { Pagination as PaginationPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { type Props, buttonVariants } from "$lib/ui/button";
import { Pagination as PaginationPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
import { type Props, buttonVariants } from '$lib/ui/button';
let {
ref = $bindable(null),
class: className,
size = "icon",
size = 'icon',
isActive = false,
page,
children,
@ -24,13 +24,13 @@
<PaginationPrimitive.Page
bind:ref
{page}
aria-current={isActive ? "page" : undefined}
aria-current={isActive ? 'page' : undefined}
data-slot="pagination-link"
data-active={isActive}
class={cn(
buttonVariants({
variant: "ghost",
size,
variant: 'ghost',
size
}),
'text-text',
isActive && 'bg-surface-1',

14
client/src/lib/ui/pagination/pagination-next-button.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
import { Pagination as PaginationPrimitive } from "bits-ui";
import ChevronRight from "@lucide/svelte/icons/chevron-right";
import { buttonVariants } from "$lib/ui/button/index.js";
import { cn } from "$lib/utils.js";
import { Pagination as PaginationPrimitive } from 'bits-ui';
import ChevronRight from '@lucide/svelte/icons/chevron-right';
import { buttonVariants } from '$lib/ui/button/index.js';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -23,9 +23,9 @@
aria-label="Go to next page"
class={cn(
buttonVariants({
size: "default",
variant: "ghost",
class: "gap-1 px-2.5 sm:pr-2.5",
size: 'default',
variant: 'ghost',
class: 'gap-1 px-2.5 sm:pr-2.5'
}),
className
)}

14
client/src/lib/ui/pagination/pagination-prev-button.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
import { Pagination as PaginationPrimitive } from "bits-ui";
import ChevronLeft from "@lucide/svelte/icons/chevron-left";
import { buttonVariants } from "$lib/ui/button/index.js";
import { cn } from "$lib/utils.js";
import { Pagination as PaginationPrimitive } from 'bits-ui';
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
import { buttonVariants } from '$lib/ui/button/index.js';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -22,9 +22,9 @@
aria-label="Go to previous page"
class={cn(
buttonVariants({
size: "default",
variant: "ghost",
class: "gap-1 px-2.5 sm:pl-2.5",
size: 'default',
variant: 'ghost',
class: 'gap-1 px-2.5 sm:pl-2.5'
}),
className
)}

2
client/src/lib/ui/pagination/pagination.svelte
View File

@ -18,7 +18,7 @@
<svelte:window
onpopstate={(state) => {
const sks = state.state['sveltekit:states'] as {} | string;
const sks = state.state['sveltekit:states'] as object | string;
if (typeof sks === 'string' && sks.includes('#pagination-')) {
page = Number(sks.split('#pagination-')[1]);
onPageChange?.(page);

8
client/src/lib/ui/popover/index.ts
View File

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

10
client/src/lib/ui/popover/popover-content.svelte
View File

@ -1,12 +1,12 @@
<script lang="ts">
import { cn } from "$lib/utils.js";
import { Popover as PopoverPrimitive } from "bits-ui";
import { cn } from '$lib/utils.js';
import { Popover as PopoverPrimitive } from 'bits-ui';
let {
ref = $bindable(null),
class: className,
sideOffset = 4,
align = "center",
align = 'center',
portalProps,
...restProps
}: PopoverPrimitive.ContentProps & {
@ -21,10 +21,10 @@
{sideOffset}
{align}
class={cn(
"bg-based text-text outline-hidden z-50 w-72 rounded-md border border-surface-1 p-4 shadow-md",
'bg-based text-text border-surface-1 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden',
// Animation
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-popover-content-transform-origin)",
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-popover-content-transform-origin)',
className
)}
{...restProps}

6
client/src/lib/ui/popover/popover-trigger.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { cn } from "$lib/utils.js";
import { Popover as PopoverPrimitive } from "bits-ui";
import { cn } from '$lib/utils.js';
import { Popover as PopoverPrimitive } from 'bits-ui';
let {
ref = $bindable(null),
@ -12,6 +12,6 @@
<PopoverPrimitive.Trigger
bind:ref
data-slot="popover-trigger"
class={cn("", className)}
class={cn('', className)}
{...restProps}
/>

26
client/src/lib/ui/range-calendar/index.ts
View File

@ -1,15 +1,15 @@
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
import Root from "./range-calendar.svelte";
import Cell from "./range-calendar-cell.svelte";
import Day from "./range-calendar-day.svelte";
import Grid from "./range-calendar-grid.svelte";
import Header from "./range-calendar-header.svelte";
import Months from "./range-calendar-months.svelte";
import GridRow from "./range-calendar-grid-row.svelte";
import Heading from "./range-calendar-heading.svelte";
import HeadCell from "./range-calendar-head-cell.svelte";
import NextButton from "./range-calendar-next-button.svelte";
import PrevButton from "./range-calendar-prev-button.svelte";
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
import Root from './range-calendar.svelte';
import Cell from './range-calendar-cell.svelte';
import Day from './range-calendar-day.svelte';
import Grid from './range-calendar-grid.svelte';
import Header from './range-calendar-header.svelte';
import Months from './range-calendar-months.svelte';
import GridRow from './range-calendar-grid-row.svelte';
import Heading from './range-calendar-heading.svelte';
import HeadCell from './range-calendar-head-cell.svelte';
import NextButton from './range-calendar-next-button.svelte';
import PrevButton from './range-calendar-prev-button.svelte';
const GridHead = RangeCalendarPrimitive.GridHead;
const GridBody = RangeCalendarPrimitive.GridBody;
@ -28,5 +28,5 @@ export {
NextButton,
PrevButton,
//
Root as RangeCalendar,
Root as RangeCalendar
};

6
client/src/lib/ui/range-calendar/range-calendar-cell.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -12,7 +12,7 @@
<RangeCalendarPrimitive.Cell
bind:ref
class={cn(
"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md",
'[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md',
className
)}
{...restProps}

6
client/src/lib/ui/range-calendar/range-calendar-grid-row.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -9,4 +9,4 @@
}: RangeCalendarPrimitive.GridRowProps = $props();
</script>
<RangeCalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />
<RangeCalendarPrimitive.GridRow bind:ref class={cn('flex', className)} {...restProps} />

6
client/src/lib/ui/range-calendar/range-calendar-grid.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -11,6 +11,6 @@
<RangeCalendarPrimitive.Grid
bind:ref
class={cn("w-full border-collapse space-y-1", className)}
class={cn('w-full border-collapse space-y-1', className)}
{...restProps}
/>

6
client/src/lib/ui/range-calendar/range-calendar-head-cell.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -11,6 +11,6 @@
<RangeCalendarPrimitive.HeadCell
bind:ref
class={cn("text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal", className)}
class={cn('text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal', className)}
{...restProps}
/>

6
client/src/lib/ui/range-calendar/range-calendar-header.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -11,6 +11,6 @@
<RangeCalendarPrimitive.Header
bind:ref
class={cn("relative flex w-full items-center justify-between pt-1", className)}
class={cn('relative flex w-full items-center justify-between pt-1', className)}
{...restProps}
/>

6
client/src/lib/ui/range-calendar/range-calendar-heading.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -11,6 +11,6 @@
<RangeCalendarPrimitive.Heading
bind:ref
class={cn("text-sm font-medium", className)}
class={cn('text-sm font-medium', className)}
{...restProps}
/>

8
client/src/lib/ui/range-calendar/range-calendar-months.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { WithElementRef } from "bits-ui";
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -13,7 +13,7 @@
<div
bind:this={ref}
class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
class={cn('mt-4 flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4', className)}
{...restProps}
>
{@render children?.()}

12
client/src/lib/ui/range-calendar/range-calendar-next-button.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
import ChevronRight from "@lucide/svelte/icons/chevron-right";
import { buttonVariants } from "$lib/ui/button/index.js";
import { cn } from "$lib/utils.js";
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
import ChevronRight from '@lucide/svelte/icons/chevron-right';
import { buttonVariants } from '$lib/ui/button/index.js';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -19,8 +19,8 @@
<RangeCalendarPrimitive.NextButton
bind:ref
class={cn(
buttonVariants({ variant: "outline" }),
"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
buttonVariants({ variant: 'outline' }),
'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
className
)}
children={children || Fallback}

12
client/src/lib/ui/range-calendar/range-calendar-prev-button.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
import ChevronLeft from "@lucide/svelte/icons/chevron-left";
import { buttonVariants } from "$lib/ui/button/index.js";
import { cn } from "$lib/utils.js";
import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
import { buttonVariants } from '$lib/ui/button/index.js';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -19,8 +19,8 @@
<RangeCalendarPrimitive.PrevButton
bind:ref
class={cn(
buttonVariants({ variant: "outline" }),
"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
buttonVariants({ variant: 'outline' }),
'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
className
)}
children={children || Fallback}

10
client/src/lib/ui/range-calendar/range-calendar.svelte
View File

@ -1,13 +1,13 @@
<script lang="ts">
import { RangeCalendar as RangeCalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
import * as RangeCalendar from "./index.js";
import { cn } from "$lib/utils.js";
import { RangeCalendar as RangeCalendarPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
import * as RangeCalendar from './index.js';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
value = $bindable(),
placeholder = $bindable(),
weekdayFormat = "short",
weekdayFormat = 'short',
class: className,
...restProps
}: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> = $props();
@ -18,7 +18,7 @@
bind:value
bind:placeholder
{weekdayFormat}
class={cn("p-3", className)}
class={cn('p-3', className)}
{...restProps}
>
{#snippet children({ months, weekdays })}

16
client/src/lib/ui/select/index.ts
View File

@ -1,11 +1,11 @@
import { Select as SelectPrimitive } from "bits-ui";
import { Select as SelectPrimitive } from 'bits-ui';
import Group from "./select-group.svelte";
import Label from "./select-label.svelte";
import Item from "./select-item.svelte";
import Content from "./select-content.svelte";
import Trigger from "./select-trigger.svelte";
import Separator from "./select-separator.svelte";
import Group from './select-group.svelte';
import Label from './select-label.svelte';
import Item from './select-item.svelte';
import Content from './select-content.svelte';
import Trigger from './select-trigger.svelte';
import Separator from './select-separator.svelte';
const Root = SelectPrimitive.Root;
@ -24,5 +24,5 @@ export {
Item as SelectItem,
Content as SelectContent,
Trigger as SelectTrigger,
Separator as SelectSeparator,
Separator as SelectSeparator
};

2
client/src/lib/ui/select/select-group.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { Select as SelectPrimitive } from "bits-ui";
import { Select as SelectPrimitive } from 'bits-ui';
let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
</script>

8
client/src/lib/ui/select/select-label.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { cn } from "$lib/utils.js";
import { type WithElementRef } from "bits-ui";
import type { HTMLAttributes } from "svelte/elements";
import { cn } from '$lib/utils.js';
import { type WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from 'svelte/elements';
let {
ref = $bindable(null),
@ -14,7 +14,7 @@
<div
bind:this={ref}
data-slot="select-label"
class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
{...restProps}
>
{@render children?.()}

8
client/src/lib/ui/select/select-separator.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { Separator as SeparatorPrimitive } from "bits-ui";
import { Separator } from "$lib/ui/separator/index.js";
import { cn } from "$lib/utils.js";
import type { Separator as SeparatorPrimitive } from 'bits-ui';
import { Separator } from '$lib/ui/separator/index.js';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -13,6 +13,6 @@
<Separator
bind:ref
data-slot="select-separator"
class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
{...restProps}
/>

2
client/src/lib/ui/select/select-trigger.svelte
View File

@ -19,7 +19,7 @@
data-slot="select-trigger"
data-size={size}
class={cn(
'border-surface-1 bg-based hover:border-overlay text-text flex flex-row-reverse w-full cursor-pointer items-center justify-between gap-2 rounded-md border px-3 py-2 md:text-sm whitespace-nowrap shadow-xs transition-all',
'border-surface-1 bg-based hover:border-overlay text-text flex w-full cursor-pointer flex-row-reverse items-center justify-between gap-2 rounded-md border px-3 py-2 whitespace-nowrap shadow-xs transition-all md:text-sm',
// Focus
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',

4
client/src/lib/ui/separator/index.ts
View File

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

8
client/src/lib/ui/separator/separator.svelte
View File

@ -1,11 +1,11 @@
<script lang="ts">
import { Separator as SeparatorPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { Separator as SeparatorPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
class: className,
orientation = "horizontal",
orientation = 'horizontal',
decorative = true,
...restProps
}: SeparatorPrimitive.RootProps = $props();
@ -17,7 +17,7 @@
{decorative}
{orientation}
class={cn(
"bg-surface shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
'bg-surface shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
className
)}
{...restProps}

20
client/src/lib/ui/sheet/index.ts
View File

@ -1,13 +1,13 @@
import { Dialog as SheetPrimitive } from "bits-ui";
import { Dialog as SheetPrimitive } from 'bits-ui';
import Root from './sheet.svelte';
import Trigger from "./sheet-trigger.svelte";
import Close from "./sheet-close.svelte";
import Overlay from "./sheet-overlay.svelte";
import Content from "./sheet-content.svelte";
import Header from "./sheet-header.svelte";
import Footer from "./sheet-footer.svelte";
import Title from "./sheet-title.svelte";
import Description from "./sheet-description.svelte";
import Trigger from './sheet-trigger.svelte';
import Close from './sheet-close.svelte';
import Overlay from './sheet-overlay.svelte';
import Content from './sheet-content.svelte';
import Header from './sheet-header.svelte';
import Footer from './sheet-footer.svelte';
import Title from './sheet-title.svelte';
import Description from './sheet-description.svelte';
const Portal = SheetPrimitive.Portal;
@ -32,5 +32,5 @@ export {
Header as SheetHeader,
Footer as SheetFooter,
Title as SheetTitle,
Description as SheetDescription,
Description as SheetDescription
};

2
client/src/lib/ui/sheet/sheet-close.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { Dialog as SheetPrimitive } from "bits-ui";
import { Dialog as SheetPrimitive } from 'bits-ui';
let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
</script>

4
client/src/lib/ui/sheet/sheet-content.svelte
View File

@ -9,7 +9,7 @@
'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t',
left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
right:
'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right max-w-2xs inset-y-0 right-0 h-full w-3/4 border-l'
'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 max-w-2xs border-l'
}
},
defaultVariants: {
@ -51,7 +51,7 @@
>
{@render children?.()}
<SheetPrimitive.Close
class="rounded-xs focus:outline-hidden absolute right-4 top-4 cursor-pointer opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none"
class="absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none"
>
<X class="size-4" />
<span class="sr-only">Close</span>

6
client/src/lib/ui/sheet/sheet-description.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { Dialog as SheetPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { Dialog as SheetPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -12,6 +12,6 @@
<SheetPrimitive.Description
bind:ref
data-slot="sheet-description"
class={cn("text-text text-sm", className)}
class={cn('text-text text-sm', className)}
{...restProps}
/>

8
client/src/lib/ui/sheet/sheet-footer.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { WithElementRef } from "bits-ui";
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -14,7 +14,7 @@
<div
bind:this={ref}
data-slot="sheet-footer"
class={cn("mt-auto flex flex-col gap-2 p-4", className)}
class={cn('mt-auto flex flex-col gap-2 p-4', className)}
{...restProps}
>
{@render children?.()}

8
client/src/lib/ui/sheet/sheet-header.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import type { WithElementRef } from "bits-ui";
import { cn } from "$lib/utils.js";
import type { HTMLAttributes } from 'svelte/elements';
import type { WithElementRef } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -14,7 +14,7 @@
<div
bind:this={ref}
data-slot="sheet-header"
class={cn("flex flex-col gap-1.5 p-4", className)}
class={cn('flex flex-col gap-1.5 p-4', className)}
{...restProps}
>
{@render children?.()}

6
client/src/lib/ui/sheet/sheet-overlay.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { Dialog as SheetPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { Dialog as SheetPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -15,7 +15,7 @@
bind:ref
data-slot="sheet-overlay"
class={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
className
)}
{...restProps}

6
client/src/lib/ui/sheet/sheet-title.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { Dialog as SheetPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { Dialog as SheetPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -12,6 +12,6 @@
<SheetPrimitive.Title
bind:ref
data-slot="sheet-title"
class={cn("text-text font-semibold", className)}
class={cn('text-text font-semibold', className)}
{...restProps}
/>

2
client/src/lib/ui/sheet/sheet-trigger.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { Dialog as SheetPrimitive } from "bits-ui";
import { Dialog as SheetPrimitive } from 'bits-ui';
let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
</script>

4
client/src/lib/ui/skeleton/index.ts
View File

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

8
client/src/lib/ui/skeleton/skeleton.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { WithElementRef, WithoutChildren } from "bits-ui";
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
import type { WithElementRef, WithoutChildren } from 'bits-ui';
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -13,6 +13,6 @@
<div
bind:this={ref}
data-slot="skeleton"
class={cn("bg-surface animate-pulse rounded-md", className)}
class={cn('bg-surface animate-pulse rounded-md', className)}
{...restProps}
></div>

2
client/src/lib/ui/sonner/index.ts
View File

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

1
client/src/lib/ui/sonner/sonner.svelte
View File

@ -1,6 +1,5 @@
<script lang="ts">
import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
import { mode } from 'mode-watcher';
let { ...restProps }: SonnerProps = $props();
</script>

18
client/src/lib/ui/table/index.ts
View File

@ -1,11 +1,11 @@
import Root from "./table.svelte";
import Body from "./table-body.svelte";
import Caption from "./table-caption.svelte";
import Cell from "./table-cell.svelte";
import Footer from "./table-footer.svelte";
import Head from "./table-head.svelte";
import Header from "./table-header.svelte";
import Row from "./table-row.svelte";
import Root from './table.svelte';
import Body from './table-body.svelte';
import Caption from './table-caption.svelte';
import Cell from './table-cell.svelte';
import Footer from './table-footer.svelte';
import Head from './table-head.svelte';
import Header from './table-header.svelte';
import Row from './table-row.svelte';
export {
Root,
@ -24,5 +24,5 @@ export {
Footer as TableFooter,
Head as TableHead,
Header as TableHeader,
Row as TableRow,
Row as TableRow
};

8
client/src/lib/ui/table/table-body.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import type { WithElementRef } from "bits-ui";
import { cn } from "$lib/utils.js";
import type { HTMLAttributes } from 'svelte/elements';
import type { WithElementRef } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -14,7 +14,7 @@
<tbody
bind:this={ref}
data-slot="table-body"
class={cn("[&_tr:last-child]:border-0", className)}
class={cn('[&_tr:last-child]:border-0', className)}
{...restProps}
>
{@render children?.()}

8
client/src/lib/ui/table/table-caption.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import type { WithElementRef } from "bits-ui";
import { cn } from "$lib/utils.js";
import type { HTMLAttributes } from 'svelte/elements';
import type { WithElementRef } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -14,7 +14,7 @@
<caption
bind:this={ref}
data-slot="table-caption"
class={cn("text-muted-foreground mt-4 text-sm", className)}
class={cn('text-muted-foreground mt-4 text-sm', className)}
{...restProps}
>
{@render children?.()}

8
client/src/lib/ui/table/table-cell.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { HTMLTdAttributes } from "svelte/elements";
import type { WithElementRef } from "bits-ui";
import { cn } from "$lib/utils.js";
import type { HTMLTdAttributes } from 'svelte/elements';
import type { WithElementRef } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -15,7 +15,7 @@
bind:this={ref}
data-slot="table-cell"
class={cn(
"whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
className
)}
{...restProps}

8
client/src/lib/ui/table/table-footer.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import type { WithElementRef } from "bits-ui";
import { cn } from "$lib/utils.js";
import type { HTMLAttributes } from 'svelte/elements';
import type { WithElementRef } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -14,7 +14,7 @@
<tfoot
bind:this={ref}
data-slot="table-footer"
class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
class={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
{...restProps}
>
{@render children?.()}

8
client/src/lib/ui/table/table-head.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { HTMLThAttributes } from "svelte/elements";
import type { WithElementRef } from "bits-ui";
import { cn } from "$lib/utils.js";
import type { HTMLThAttributes } from 'svelte/elements';
import type { WithElementRef } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -15,7 +15,7 @@
bind:this={ref}
data-slot="table-head"
class={cn(
"text-text h-10 whitespace-nowrap px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
'text-text h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
className
)}
{...restProps}

8
client/src/lib/ui/table/table-header.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import type { WithElementRef } from "bits-ui";
import { cn } from "$lib/utils.js";
import type { HTMLAttributes } from 'svelte/elements';
import type { WithElementRef } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -14,7 +14,7 @@
<thead
bind:this={ref}
data-slot="table-header"
class={cn("[&_tr]:border-b bg-mantle border-surface-1", className)}
class={cn('bg-mantle border-surface-1 [&_tr]:border-b', className)}
{...restProps}
>
{@render children?.()}

8
client/src/lib/ui/table/table-row.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import type { WithElementRef } from "bits-ui";
import { cn } from "$lib/utils.js";
import type { HTMLAttributes } from 'svelte/elements';
import type { WithElementRef } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -15,7 +15,7 @@
bind:this={ref}
data-slot="table-row"
class={cn(
"data-[state=selected]:bg-surface border-b border-surface text-text transition-colors",
'data-[state=selected]:bg-surface border-surface text-text border-b transition-colors',
className
)}
{...restProps}

13
client/src/lib/ui/table/table.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { HTMLTableAttributes } from "svelte/elements";
import type { WithElementRef } from "bits-ui";
import { cn } from "$lib/utils.js";
import type { HTMLTableAttributes } from 'svelte/elements';
import type { WithElementRef } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -11,11 +11,14 @@
}: WithElementRef<HTMLTableAttributes> = $props();
</script>
<div data-slot="table-container" class="relative w-full bg-based rounded border border-surface-1 overflow-x-auto">
<div
data-slot="table-container"
class="bg-based border-surface-1 relative w-full overflow-x-auto rounded border"
>
<table
bind:this={ref}
data-slot="table"
class={cn("w-full caption-bottom text-sm", className)}
class={cn('w-full caption-bottom text-sm', className)}
{...restProps}
>
{@render children?.()}

10
client/src/lib/ui/tabs/index.ts
View File

@ -1,7 +1,7 @@
import Root from "./tabs.svelte";
import Content from "./tabs-content.svelte";
import List from "./tabs-list.svelte";
import Trigger from "./tabs-trigger.svelte";
import Root from './tabs.svelte';
import Content from './tabs-content.svelte';
import List from './tabs-list.svelte';
import Trigger from './tabs-trigger.svelte';
export {
Root,
@ -12,5 +12,5 @@ export {
Root as Tabs,
Content as TabsContent,
List as TabsList,
Trigger as TabsTrigger,
Trigger as TabsTrigger
};

6
client/src/lib/ui/tabs/tabs-content.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { Tabs as TabsPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -12,6 +12,6 @@
<TabsPrimitive.Content
bind:ref
data-slot="tabs-content"
class={cn("flex-1 outline-none", className)}
class={cn('flex-1 outline-none', className)}
{...restProps}
/>

12
client/src/lib/ui/tabs/tabs-list.svelte
View File

@ -1,19 +1,15 @@
<script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { Tabs as TabsPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
class: className,
...restProps
}: TabsPrimitive.ListProps = $props();
let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
</script>
<TabsPrimitive.List
bind:ref
data-slot="tabs-list"
class={cn(
"bg-based gap-1 inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
'bg-based inline-flex h-9 w-fit items-center justify-center gap-1 rounded-lg p-[3px]',
className
)}
{...restProps}

6
client/src/lib/ui/tabs/tabs-trigger.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { Tabs as TabsPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -13,7 +13,7 @@
bind:ref
data-slot="tabs-trigger"
class={cn(
"data-[state=active]:bg-surface hover:bg-surface cursor-pointer text-text inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"data-[state=active]:bg-surface hover:bg-surface text-text inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...restProps}

6
client/src/lib/ui/tabs/tabs.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { Tabs as TabsPrimitive } from 'bits-ui';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
@ -14,6 +14,6 @@
bind:ref
bind:value
data-slot="tabs"
class={cn("flex flex-col gap-2", className)}
class={cn('flex flex-col gap-2', className)}
{...restProps}
/>

21
client/src/lib/utils.ts
View File

@ -7,24 +7,23 @@ export function cn(...inputs: ClassValue[]) {
export async function attempt<T, E = Error>(
func: (() => T) | Promise<T>,
handler?: ((error: E) => void) | 'throw',
): Promise<{ result: T | null, error: E | null }> {
handler?: ((error: E) => void) | 'throw'
): Promise<{ result: T | null; error: E | null }> {
try {
const result = await (func instanceof Promise ? func : Promise.resolve().then(func))
return { result, error: null }
}
catch (error) {
const result = await (func instanceof Promise ? func : Promise.resolve().then(func));
return { result, error: null };
} catch (error) {
if (handler === 'throw') {
throw error
throw error;
}
if (handler) {
handler(error as E)
handler(error as E);
}
return { result: null, error: error as E }
return { result: null, error: error as E };
}
}
export function delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
return new Promise((resolve) => setTimeout(resolve, ms));
}

Some files were not shown because too many files have changed in this diff Show More