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 'tailwindcss';
@import "tw-animate-css"; @import 'tw-animate-css';
@custom-variant dark (&:where(.dark, .dark *)); @custom-variant dark (&:where(.dark, .dark *));
@theme inline { @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-rosewater: var(--rosewater);
--color-flamingo: var(--flamingo); --color-flamingo: var(--flamingo);
--color-pink: var(--pink); --color-pink: var(--pink);
--color-mauve: var(--mauve); --color-mauve: var(--mauve);
--color-red: var(--red); --color-red: var(--red);
--color-maroon: var(--maroon); --color-maroon: var(--maroon);
--color-peach: var(--peach); --color-peach: var(--peach);
--color-yellow: var(--yellow); --color-yellow: var(--yellow);
--color-green: var(--green); --color-green: var(--green);
--color-teal: var(--teal); --color-teal: var(--teal);
--color-sky: var(--sky); --color-sky: var(--sky);
--color-sapphire: var(--sapphire); --color-sapphire: var(--sapphire);
--color-blue: var(--blue); --color-blue: var(--blue);
--color-lavender: var(--lavender); --color-lavender: var(--lavender);
--color-text: var(--text); --color-text: var(--text);
--color-subtext-1: var(--subtext-1); --color-subtext-1: var(--subtext-1);
--color-subtext: var(--subtext); --color-subtext: var(--subtext);
--color-overlay-2: var(--overlay-2); --color-overlay-2: var(--overlay-2);
--color-overlay-1: var(--overlay-1); --color-overlay-1: var(--overlay-1);
--color-overlay: var(--overlay); --color-overlay: var(--overlay);
--color-surface-2: var(--surface-2); --color-surface-2: var(--surface-2);
--color-surface-1: var(--surface-1); --color-surface-1: var(--surface-1);
--color-surface: var(--surface); --color-surface: var(--surface);
--color-based: var(--based); --color-based: var(--based);
--color-mantle: var(--mantle); --color-mantle: var(--mantle);
--color-crust: var(--crust); --color-crust: var(--crust);
} }
@layer base { @layer base {
:root { :root {
--rosewater: hsl(11deg, 59%, 67%); --rosewater: hsl(11deg, 59%, 67%);
--flamingo: hsl(0deg, 60%, 67%); --flamingo: hsl(0deg, 60%, 67%);
--pink: hsl(316deg, 73%, 69%); --pink: hsl(316deg, 73%, 69%);
--mauve: hsl(266deg, 85%, 58%); --mauve: hsl(266deg, 85%, 58%);
--red: hsl(347deg, 87%, 44%); --red: hsl(347deg, 87%, 44%);
--maroon: hsl(355deg, 76%, 59%); --maroon: hsl(355deg, 76%, 59%);
--peach: hsl(22deg, 99%, 52%); --peach: hsl(22deg, 99%, 52%);
--yellow: hsl(35deg, 77%, 49%); --yellow: hsl(35deg, 77%, 49%);
--green: hsl(109deg, 58%, 40%); --green: hsl(109deg, 58%, 40%);
--teal: hsl(183deg, 74%, 35%); --teal: hsl(183deg, 74%, 35%);
--sky: hsl(197deg, 97%, 46%); --sky: hsl(197deg, 97%, 46%);
--sapphire: hsl(189deg, 70%, 42%); --sapphire: hsl(189deg, 70%, 42%);
--blue: hsl(220deg, 91%, 54%); --blue: hsl(220deg, 91%, 54%);
--lavender: hsl(231deg, 97%, 72%); --lavender: hsl(231deg, 97%, 72%);
--text: hsl(234deg, 16%, 35%); --text: hsl(234deg, 16%, 35%);
--subtext-1: hsl(233deg, 13%, 41%); --subtext-1: hsl(233deg, 13%, 41%);
--subtext: hsl(233deg, 10%, 47%); --subtext: hsl(233deg, 10%, 47%);
--overlay-2: hsl(232deg, 10%, 53%); --overlay-2: hsl(232deg, 10%, 53%);
--overlay-1: hsl(231deg, 10%, 59%); --overlay-1: hsl(231deg, 10%, 59%);
--overlay: hsl(228deg, 11%, 65%); --overlay: hsl(228deg, 11%, 65%);
--surface-2: hsl(227deg, 12%, 71%); --surface-2: hsl(227deg, 12%, 71%);
--surface-1: hsl(225deg, 14%, 77%); --surface-1: hsl(225deg, 14%, 77%);
--surface: hsl(223deg, 16%, 83%); --surface: hsl(223deg, 16%, 83%);
--based: hsl(220deg, 23%, 95%); --based: hsl(220deg, 23%, 95%);
--mantle: hsl(220deg, 22%, 92%); --mantle: hsl(220deg, 22%, 92%);
--crust: hsl(220deg, 21%, 89%); --crust: hsl(220deg, 21%, 89%);
} }
.dark { .dark {
--rosewater: hsl(10deg, 56%, 91%); --rosewater: hsl(10deg, 56%, 91%);
--flamingo: hsl(0deg, 59%, 88%); --flamingo: hsl(0deg, 59%, 88%);
--pink: hsl(316deg, 72%, 86%); --pink: hsl(316deg, 72%, 86%);
--mauve: hsl(267deg, 84%, 81%); --mauve: hsl(267deg, 84%, 81%);
--red: hsl(343deg, 81%, 75%); --red: hsl(343deg, 81%, 75%);
--maroon: hsl(350deg, 65%, 77%); --maroon: hsl(350deg, 65%, 77%);
--peach: hsl(23deg, 92%, 75%); --peach: hsl(23deg, 92%, 75%);
--yellow: hsl(41deg, 86%, 83%); --yellow: hsl(41deg, 86%, 83%);
--green: hsl(115deg, 54%, 76%); --green: hsl(115deg, 54%, 76%);
--teal: hsl(170deg, 57%, 73%); --teal: hsl(170deg, 57%, 73%);
--sky: hsl(189deg, 71%, 73%); --sky: hsl(189deg, 71%, 73%);
--sapphire: hsl(199deg, 76%, 69%); --sapphire: hsl(199deg, 76%, 69%);
--blue: hsl(217deg, 92%, 76%); --blue: hsl(217deg, 92%, 76%);
--lavender: hsl(232deg, 97%, 85%); --lavender: hsl(232deg, 97%, 85%);
--text: hsl(226deg, 64%, 88%); --text: hsl(226deg, 64%, 88%);
--subtext-1: hsl(227deg, 35%, 80%); --subtext-1: hsl(227deg, 35%, 80%);
--subtext: hsl(228deg, 24%, 72%); --subtext: hsl(228deg, 24%, 72%);
--overlay-2: hsl(228deg, 17%, 64%); --overlay-2: hsl(228deg, 17%, 64%);
--overlay-1: hsl(230deg, 13%, 55%); --overlay-1: hsl(230deg, 13%, 55%);
--overlay: hsl(231deg, 11%, 47%); --overlay: hsl(231deg, 11%, 47%);
--surface-2: hsl(233deg, 12%, 39%); --surface-2: hsl(233deg, 12%, 39%);
--surface-1: hsl(234deg, 13%, 31%); --surface-1: hsl(234deg, 13%, 31%);
--surface: hsl(237deg, 16%, 23%); --surface: hsl(237deg, 16%, 23%);
--based: hsl(240deg, 21%, 15%); --based: hsl(240deg, 21%, 15%);
--mantle: hsl(240deg, 21%, 12%); --mantle: hsl(240deg, 21%, 12%);
--crust: hsl(240deg, 23%, 9%); --crust: hsl(240deg, 23%, 9%);
} }
} }
/* /*
@ -102,4 +102,4 @@
Focus Outline: blue Focus Outline: blue
Border: surface-1 Border: surface-1
Hover: bump color by 2 (eg crust -> based), if accent color drop opacity (eg blue -> blue/90) 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) { 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 {
import { ValidationError, type Violation } from "@bufbuild/protovalidate"; create,
import { Validator } from "../transport"; type DescMessage,
import { ConnectError, type Client } from "@connectrpc/connect"; type DescService,
import type { Action } from "svelte/action"; 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> = { type Options<Input extends DescMessage, Output extends DescMessage> = {
init?: MessageInitShape<Input>, init?: MessageInitShape<Input>;
start?: boolean, start?: boolean;
reset?: boolean, reset?: boolean;
onSubmit?: (formData: FormData, input: MessageShape<Input>) => Promise<MessageShape<Input>>, onSubmit?: (formData: FormData, input: MessageShape<Input>) => Promise<MessageShape<Input>>;
onResult?: (result: MessageShape<Output>) => void, onResult?: (result: MessageShape<Output>) => void;
onError?: (err: Violation[] | ConnectError) => void onError?: (err: Violation[] | ConnectError) => void;
}
type Violations<Field> = {
[field in keyof Field]?: Violation[];
}; };
export function coolForm< type Violations<Field> = {
Service extends DescService, [field in keyof Field]?: Violation[];
Method extends Service['methods'][number] };
>(
client: Client<Service>, export function coolForm<Service extends DescService, Method extends Service['methods'][number]>(
method: Method, client: Client<Service>,
options?: Options<Method['input'], Method['output']> method: Method,
options?: Options<Method['input'], Method['output']>
) { ) {
const input = $state(create(method.input as Method['input'], options?.init)); const input = $state(create(method.input as Method['input'], options?.init));
const output = $state(create(method.output as Method['output'])); const output = $state(create(method.output as Method['output']));
const errors: Violations<Method['input']['field']> & { const errors: Violations<Method['input']['field']> & {
form?: ConnectError form?: ConnectError;
} = $state({}); } = $state({});
let loading = $state(false); let loading = $state(false);
const validate = () => { const validate = () => {
// Delete existing errors // Delete existing errors
for (const key in errors) { for (const key in errors) {
delete errors[key]; delete errors[key];
} }
try { try {
Validator.validate(method['input'], input); Validator.validate(method['input'], input);
} catch (e) { } catch (e) {
if (!(e instanceof ValidationError)) { if (!(e instanceof ValidationError)) {
throw e; throw e;
} }
// Map violation errors to errors rune // Map violation errors to errors rune
for (const violation of e.violations) { for (const violation of e.violations) {
for (const field of violation.field) { for (const field of violation.field) {
if (!("localName" in field)) { if (!('localName' in field)) {
continue; continue;
} }
// Create localName property if it doesn't exist // Create localName property if it doesn't exist
if (!errors[field.localName]) { if (!errors[field.localName]) {
Object.assign(errors, { Object.assign(errors, {
[field.localName]: [violation] [field.localName]: [violation]
}) });
} else { } else {
errors[field.localName]?.push(violation); errors[field.localName]?.push(violation);
} }
} }
} }
return e.violations; return e.violations;
} }
return []; return [];
}; };
// When a request is successful // When a request is successful
const success = (response: MessageShape<Method['output']>) => { const success = (response: MessageShape<Method['output']>) => {
loading = false; loading = false;
// Send the response up // Send the response up
options?.onResult?.(response); options?.onResult?.(response);
// Set the response // Set the response
Object.assign(output, response); Object.assign(output, response);
// If we want to reset the input // If we want to reset the input
if (options && (options.reset == undefined || options.reset)) { if (options && (options.reset == undefined || options.reset)) {
const cleared = create(method.input as Method['input'], options?.init) const cleared = create(method.input as Method['input'], options?.init);
Object.assign(input, cleared); Object.assign(input, cleared);
} }
} };
// When a request fails // When a request fails
const fail = (err: Violation[] | ConnectError | any) => { const fail = (err: Violation[] | ConnectError | Error) => {
loading = false; loading = false;
// It's a Violation[] // It's a Violation[]
if (Array.isArray(err)) { if (Array.isArray(err)) {
// Send the error up // Send the error up
options?.onError?.(err); options?.onError?.(err);
return; return;
} }
// It's a ConnectError // It's a ConnectError
if (err instanceof ConnectError) { if (err instanceof ConnectError) {
// Assign it to the form // Assign it to the form
errors.form = err; errors.form = err;
// Send the error up // Send the error up
options?.onError?.(err); options?.onError?.(err);
return; return;
} }
throw err; throw err;
} };
const submit = () => { const submit = () => {
loading = true; loading = true;
// Validate // Validate
const validationErrors = validate(); const validationErrors = validate();
if (validationErrors.length > 0) { if (validationErrors.length > 0) {
fail(validationErrors); fail(validationErrors);
return; return;
} }
// Send response // Send response
if (method.methodKind == "unary") { if (method.methodKind == 'unary') {
// @ts-ignore I can't figure out how to make this typescript compliant // @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']>> const response = client[method.localName]($state.snapshot(input)) as Promise<
MessageShape<Method['output']>
>;
response response
.then((resp) => { .then((resp) => {
success(resp); success(resp);
}).catch(err => { })
fail(err); .catch((err) => {
}); fail(err);
} });
} }
};
// A nice action to give to forms to run submit() on submit // A nice action to give to forms to run submit() on submit
const impair: Action<HTMLFormElement> = (form) => { const impair: Action<HTMLFormElement> = (form) => {
$effect(() => { $effect(() => {
form.onsubmit = (event) => { form.onsubmit = (event) => {
event.preventDefault(); event.preventDefault();
if (options?.onSubmit) { if (options?.onSubmit) {
const formData = new FormData(form); const formData = new FormData(form);
options.onSubmit(formData, input).then((i) => { options.onSubmit(formData, input).then((i) => {
Object.assign(input, i); Object.assign(input, i);
submit(); submit();
}); });
return; return;
} }
submit(); submit();
} };
return () => { return () => {
form.onsubmit = () => { }; form.onsubmit = () => {};
}; };
}); });
}; };
if (options?.start) { if (options?.start) {
submit(); submit();
} }
return { return {
input, input,
output, output,
errors, errors,
loading: () => loading, loading: () => loading,
submit, submit,
validate, validate,
impair impair
} };
} }

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

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

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

@ -1,5 +1,5 @@
import { createConnectTransport } from '@connectrpc/connect-web'; 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 { Code, ConnectError, createClient, type Interceptor } from '@connectrpc/connect';
import { AuthService } from '$lib/connect/user/v1/auth_pb'; import { AuthService } from '$lib/connect/user/v1/auth_pb';
import { UserService } from '$lib/connect/user/v1/user_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) { if (error.code === Code.Unauthenticated) {
const redirectURL = new URL(page.url); const redirectURL = new URL(page.url);
redirectURL.pathname = '/auth'; 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); await goto(redirectURL);
} }

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

@ -13,7 +13,7 @@
bind:ref bind:ref
data-slot="avatar-fallback" data-slot="avatar-fallback"
class={cn( 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 className
)} )}
{...restProps} {...restProps}

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

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

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Avatar as AvatarPrimitive } from "bits-ui"; import { Avatar as AvatarPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -12,6 +12,9 @@
<AvatarPrimitive.Root <AvatarPrimitive.Root
bind:ref bind:ref
data-slot="avatar" 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} {...restProps}
/> />

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

@ -1,6 +1,6 @@
import Root from "./avatar.svelte"; import Root from './avatar.svelte';
import Image from "./avatar-image.svelte"; import Image from './avatar-image.svelte';
import Fallback from "./avatar-fallback.svelte"; import Fallback from './avatar-fallback.svelte';
export { export {
Root, Root,
@ -9,5 +9,5 @@ export {
// //
Root as Avatar, Root as Avatar,
Image as AvatarImage, 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({ export const buttonVariants = tv({
base: cn( 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
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2', 'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
@ -16,14 +16,14 @@
'disabled:pointer-events-none disabled:opacity-50', 'disabled:pointer-events-none disabled:opacity-50',
// Images // 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: { variants: {
variant: { variant: {
default: 'text-crust bg-accent hover:bg-accent/90 shadow-xs', default: 'text-crust bg-accent hover:bg-accent/90 shadow-xs',
red: 'text-crust bg-red hover:bg-red/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', outline: 'text-text border-surface-1 hover:bg-surface border bg-transparent shadow-xs',
input: 'text-text border-surface-1 hover:border-overlay shadow-xs border bg-transparent', input: 'text-text border-surface-1 hover:border-overlay border bg-transparent shadow-xs',
ghost: 'text-text hover:bg-surface shadow-xs' ghost: 'text-text hover:bg-surface shadow-xs'
}, },
size: { size: {
@ -47,7 +47,6 @@
variant?: ButtonVariant; variant?: ButtonVariant;
size?: ButtonSize; size?: ButtonSize;
loading?: boolean; loading?: boolean;
scan?: boolean;
}; };
</script> </script>
@ -60,7 +59,6 @@
href = undefined, href = undefined,
type = 'button', type = 'button',
loading, loading,
scan,
children, children,
...restProps ...restProps
}: ButtonProps = $props(); }: ButtonProps = $props();

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

@ -2,8 +2,8 @@ import Root, {
type ButtonProps, type ButtonProps,
type ButtonSize, type ButtonSize,
type ButtonVariant, type ButtonVariant,
buttonVariants, buttonVariants
} from "./button.svelte"; } from './button.svelte';
export { export {
Root, Root,
@ -13,5 +13,5 @@ export {
buttonVariants, buttonVariants,
type ButtonProps, type ButtonProps,
type ButtonSize, 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 { export {
Root, 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 Pick a date range
{/if} {/if}
</Popover.Trigger> </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 <RangeCalendar
bind:value bind:value
onStartValueChange={(v) => { 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 { export { Root, Root as DateRangePicker };
Root,
Root as DateRangePicker
};

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

@ -1,5 +1,5 @@
<script lang="ts"> <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(); let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
</script> </script>

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

@ -34,7 +34,7 @@
{@render children?.()} {@render children?.()}
<DialogPrimitive.Close <DialogPrimitive.Close
class={cn( 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
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2', '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"> <script lang="ts">
import { Dialog as DialogPrimitive } from "bits-ui"; import { Dialog as DialogPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -12,6 +12,6 @@
<DialogPrimitive.Description <DialogPrimitive.Description
bind:ref bind:ref
data-slot="dialog-description" data-slot="dialog-description"
class={cn("text-muted-foreground text-sm", className)} class={cn('text-muted-foreground text-sm', className)}
{...restProps} {...restProps}
/> />

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -14,7 +14,7 @@
<div <div
bind:this={ref} bind:this={ref}
data-slot="dialog-footer" 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} {...restProps}
> >
{@render children?.()} {@render children?.()}

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -14,7 +14,7 @@
<div <div
bind:this={ref} bind:this={ref}
data-slot="dialog-header" 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} {...restProps}
> >
{@render children?.()} {@render children?.()}

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Dialog as DialogPrimitive } from "bits-ui"; import { Dialog as DialogPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
bind:ref bind:ref
data-slot="dialog-overlay" data-slot="dialog-overlay"
class={cn( 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 className
)} )}
{...restProps} {...restProps}

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

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

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

@ -1,5 +1,5 @@
<script lang="ts"> <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(); let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
</script> </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 Root from './dialog.svelte';
import Title from "./dialog-title.svelte"; import Title from './dialog-title.svelte';
import Footer from "./dialog-footer.svelte"; import Footer from './dialog-footer.svelte';
import Header from "./dialog-header.svelte"; import Header from './dialog-header.svelte';
import Overlay from "./dialog-overlay.svelte"; import Overlay from './dialog-overlay.svelte';
import Content from "./dialog-content.svelte"; import Content from './dialog-content.svelte';
import Description from "./dialog-description.svelte"; import Description from './dialog-description.svelte';
import Trigger from "./dialog-trigger.svelte"; import Trigger from './dialog-trigger.svelte';
import Close from "./dialog-close.svelte"; import Close from './dialog-close.svelte';
const Portal = DialogPrimitive.Portal; const Portal = DialogPrimitive.Portal;
@ -33,5 +33,5 @@ export {
Overlay as DialogOverlay, Overlay as DialogOverlay,
Content as DialogContent, Content as DialogContent,
Description as DialogDescription, 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"> <script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui"; import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
import Check from "@lucide/svelte/icons/check"; import Check from '@lucide/svelte/icons/check';
import Minus from "@lucide/svelte/icons/minus"; import Minus from '@lucide/svelte/icons/minus';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
import type { Snippet } from "svelte"; import type { Snippet } from 'svelte';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -23,13 +23,13 @@
bind:indeterminate bind:indeterminate
data-slot="dropdown-menu-checkbox-item" data-slot="dropdown-menu-checkbox-item"
class={cn( 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 // Disabled
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50", 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
// Images // 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 className
)} )}
{...restProps} {...restProps}
@ -39,7 +39,7 @@
{#if indeterminate} {#if indeterminate}
<Minus class="size-4" /> <Minus class="size-4" />
{:else} {:else}
<Check class={cn("size-4", !checked && "text-transparent")} /> <Check class={cn('size-4', !checked && 'text-transparent')} />
{/if} {/if}
</span> </span>
{@render childrenProp?.()} {@render childrenProp?.()}

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

@ -12,6 +12,6 @@
<DropdownMenuPrimitive.Group <DropdownMenuPrimitive.Group
bind:ref bind:ref
data-slot="dropdown-menu-group" 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} {...restProps}
/> />

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
import { type WithElementRef } from "bits-ui"; import { type WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -17,7 +17,7 @@
<div <div
bind:this={ref} bind:this={ref}
data-slot="dropdown-menu-label" 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} {...restProps}
> >
{@render children?.()} {@render children?.()}

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

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

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

@ -15,10 +15,10 @@
bind:ref bind:ref
data-slot="dropdown-menu-radio-item" data-slot="dropdown-menu-radio-item"
class={cn( 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 // Disabled
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50", 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
// Images // Images
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "[&_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"> <script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -12,6 +12,6 @@
<DropdownMenuPrimitive.Separator <DropdownMenuPrimitive.Separator
bind:ref bind:ref
data-slot="dropdown-menu-separator" 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} {...restProps}
/> />

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

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

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

@ -13,7 +13,7 @@
bind:ref bind:ref
data-slot="dropdown-menu-sub-content" data-slot="dropdown-menu-sub-content"
class={cn( 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 // 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', '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"> <script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import ChevronRight from "@lucide/svelte/icons/chevron-right"; import ChevronRight from '@lucide/svelte/icons/chevron-right';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -18,8 +18,8 @@
bind:ref bind:ref
data-slot="dropdown-menu-sub-trigger" data-slot="dropdown-menu-sub-trigger"
class={cn( 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", '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", inset && 'pl-8',
className className
)} )}
{...restProps} {...restProps}

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

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

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

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

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

@ -1,31 +1,31 @@
import { getContext, hasContext, setContext } from 'svelte'; import { getContext, hasContext, setContext } from 'svelte';
type Item = { type Item = {
id: string; id: string;
name: string; name: string;
} };
const key = 'form'; const key = 'form';
export function setFormContext(id: string, name: string) { export function setFormContext(id: string, name: string) {
const item = getFormContext(); const item = getFormContext();
if (!item) { if (!item) {
const item: Item = $state({ const item: Item = $state({
id, id,
name, name
}); });
setContext(key, item); setContext(key, item);
return; return;
} }
item.id = id; item.id = id;
item.name = name; item.name = name;
} }
export function getFormContext() { export function getFormContext() {
if (!hasContext(key)) { if (!hasContext(key)) {
return null; 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}> <div bind:this={ref} class={cn('text-red text-sm', className)} {...restProps}>
{#if errors && Array.isArray(errors)} {#if errors && Array.isArray(errors)}
{#each errors as error} {#each errors as error (error)}
<label for={item?.id}>{error.message}</label> <label for={item?.id}>{error.message}</label>
{/each} {/each}
{:else if errors} {:else if errors}

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

@ -16,6 +16,6 @@
} }
</script> </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?.()} {@render children?.()}
</div> </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 Errors from './errors.svelte';
import Label from './label.svelte'; import Label from './label.svelte';
export { export { Field, Errors, Label };
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 { export {
Root, Root,
// //
Root as Input, Root as Input
}; };

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

@ -8,9 +8,7 @@
type Props = WithElementRef< type Props = WithElementRef<
Omit<HTMLInputAttributes, 'type'> & Omit<HTMLInputAttributes, 'type'> &
({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined }) & { ({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
scan?: boolean;
}
>; >;
let { let {
@ -19,7 +17,6 @@
type, type,
files = $bindable(), files = $bindable(),
class: className, class: className,
scan,
id, id,
name, name,
...restProps ...restProps
@ -40,7 +37,7 @@
{name} {name}
bind:this={ref} bind:this={ref}
class={cn( 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
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2', 'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
@ -61,7 +58,7 @@
{name} {name}
bind:this={ref} bind:this={ref}
class={cn( 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
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2', '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 { export {
Root, Root,
// //
Root as Label, Root as Label
}; };

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

@ -13,7 +13,7 @@
bind:ref bind:ref
data-slot="label" data-slot="label"
class={cn( 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 className
)} )}
{...restProps} {...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 { export { Pager };
Pager
}

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

@ -1,10 +1,10 @@
import Root from "./pagination.svelte"; import Root from './pagination.svelte';
import Content from "./pagination-content.svelte"; import Content from './pagination-content.svelte';
import Item from "./pagination-item.svelte"; import Item from './pagination-item.svelte';
import Link from "./pagination-link.svelte"; import Link from './pagination-link.svelte';
import PrevButton from "./pagination-prev-button.svelte"; import PrevButton from './pagination-prev-button.svelte';
import NextButton from "./pagination-next-button.svelte"; import NextButton from './pagination-next-button.svelte';
import Ellipsis from "./pagination-ellipsis.svelte"; import Ellipsis from './pagination-ellipsis.svelte';
export { export {
Root, Root,
@ -21,5 +21,5 @@ export {
Link as PaginationLink, Link as PaginationLink,
PrevButton as PaginationPrevButton, PrevButton as PaginationPrevButton,
NextButton as PaginationNextButton, 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"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -14,7 +14,7 @@
<ul <ul
bind:this={ref} bind:this={ref}
data-slot="pagination-content" 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} {...restProps}
> >
{@render children?.()} {@render children?.()}

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
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';
import Trigger from "./popover-trigger.svelte"; import Trigger from './popover-trigger.svelte';
const Root = PopoverPrimitive.Root; const Root = PopoverPrimitive.Root;
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
}; };

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

@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
import { Popover as PopoverPrimitive } from "bits-ui"; import { Popover as PopoverPrimitive } from 'bits-ui';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
sideOffset = 4, sideOffset = 4,
align = "center", align = 'center',
portalProps, portalProps,
...restProps ...restProps
}: PopoverPrimitive.ContentProps & { }: PopoverPrimitive.ContentProps & {
@ -21,10 +21,10 @@
{sideOffset} {sideOffset}
{align} {align}
class={cn( 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 // 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 className
)} )}
{...restProps} {...restProps}

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

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

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

@ -1,15 +1,15 @@
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui"; import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
import Root from "./range-calendar.svelte"; import Root from './range-calendar.svelte';
import Cell from "./range-calendar-cell.svelte"; import Cell from './range-calendar-cell.svelte';
import Day from "./range-calendar-day.svelte"; import Day from './range-calendar-day.svelte';
import Grid from "./range-calendar-grid.svelte"; import Grid from './range-calendar-grid.svelte';
import Header from "./range-calendar-header.svelte"; import Header from './range-calendar-header.svelte';
import Months from "./range-calendar-months.svelte"; import Months from './range-calendar-months.svelte';
import GridRow from "./range-calendar-grid-row.svelte"; import GridRow from './range-calendar-grid-row.svelte';
import Heading from "./range-calendar-heading.svelte"; import Heading from './range-calendar-heading.svelte';
import HeadCell from "./range-calendar-head-cell.svelte"; import HeadCell from './range-calendar-head-cell.svelte';
import NextButton from "./range-calendar-next-button.svelte"; import NextButton from './range-calendar-next-button.svelte';
import PrevButton from "./range-calendar-prev-button.svelte"; import PrevButton from './range-calendar-prev-button.svelte';
const GridHead = RangeCalendarPrimitive.GridHead; const GridHead = RangeCalendarPrimitive.GridHead;
const GridBody = RangeCalendarPrimitive.GridBody; const GridBody = RangeCalendarPrimitive.GridBody;
@ -28,5 +28,5 @@ export {
NextButton, NextButton,
PrevButton, 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"> <script lang="ts">
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui"; import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -12,7 +12,7 @@
<RangeCalendarPrimitive.Cell <RangeCalendarPrimitive.Cell
bind:ref bind:ref
class={cn( 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 className
)} )}
{...restProps} {...restProps}

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

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

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui"; import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -11,6 +11,6 @@
<RangeCalendarPrimitive.HeadCell <RangeCalendarPrimitive.HeadCell
bind:ref 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} {...restProps}
/> />

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui"; import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -11,6 +11,6 @@
<RangeCalendarPrimitive.Header <RangeCalendarPrimitive.Header
bind:ref 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} {...restProps}
/> />

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

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

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<div <div
bind:this={ref} 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} {...restProps}
> >
{@render children?.()} {@render children?.()}

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

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

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

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

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

@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import { RangeCalendar as RangeCalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui"; import { RangeCalendar as RangeCalendarPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
import * as RangeCalendar from "./index.js"; import * as RangeCalendar from './index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
value = $bindable(), value = $bindable(),
placeholder = $bindable(), placeholder = $bindable(),
weekdayFormat = "short", weekdayFormat = 'short',
class: className, class: className,
...restProps ...restProps
}: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> = $props(); }: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> = $props();
@ -18,7 +18,7 @@
bind:value bind:value
bind:placeholder bind:placeholder
{weekdayFormat} {weekdayFormat}
class={cn("p-3", className)} class={cn('p-3', className)}
{...restProps} {...restProps}
> >
{#snippet children({ months, weekdays })} {#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 Group from './select-group.svelte';
import Label from "./select-label.svelte"; import Label from './select-label.svelte';
import Item from "./select-item.svelte"; import Item from './select-item.svelte';
import Content from "./select-content.svelte"; import Content from './select-content.svelte';
import Trigger from "./select-trigger.svelte"; import Trigger from './select-trigger.svelte';
import Separator from "./select-separator.svelte"; import Separator from './select-separator.svelte';
const Root = SelectPrimitive.Root; const Root = SelectPrimitive.Root;
@ -24,5 +24,5 @@ export {
Item as SelectItem, Item as SelectItem,
Content as SelectContent, Content as SelectContent,
Trigger as SelectTrigger, 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"> <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(); let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
</script> </script>

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
import { type WithElementRef } from "bits-ui"; import { type WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -14,7 +14,7 @@
<div <div
bind:this={ref} bind:this={ref}
data-slot="select-label" 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} {...restProps}
> >
{@render children?.()} {@render children?.()}

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { Separator as SeparatorPrimitive } from "bits-ui"; import type { Separator as SeparatorPrimitive } from 'bits-ui';
import { Separator } from "$lib/ui/separator/index.js"; import { Separator } from '$lib/ui/separator/index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,6 +13,6 @@
<Separator <Separator
bind:ref bind:ref
data-slot="select-separator" 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} {...restProps}
/> />

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

@ -19,7 +19,7 @@
data-slot="select-trigger" data-slot="select-trigger"
data-size={size} data-size={size}
class={cn( 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
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2', '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 { export {
Root, Root,
// //
Root as Separator, Root as Separator
}; };

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

@ -1,11 +1,11 @@
<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';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
orientation = "horizontal", orientation = 'horizontal',
decorative = true, decorative = true,
...restProps ...restProps
}: SeparatorPrimitive.RootProps = $props(); }: SeparatorPrimitive.RootProps = $props();
@ -17,7 +17,7 @@
{decorative} {decorative}
{orientation} {orientation}
class={cn( 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 className
)} )}
{...restProps} {...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 Root from './sheet.svelte';
import Trigger from "./sheet-trigger.svelte"; import Trigger from './sheet-trigger.svelte';
import Close from "./sheet-close.svelte"; import Close from './sheet-close.svelte';
import Overlay from "./sheet-overlay.svelte"; import Overlay from './sheet-overlay.svelte';
import Content from "./sheet-content.svelte"; import Content from './sheet-content.svelte';
import Header from "./sheet-header.svelte"; import Header from './sheet-header.svelte';
import Footer from "./sheet-footer.svelte"; import Footer from './sheet-footer.svelte';
import Title from "./sheet-title.svelte"; import Title from './sheet-title.svelte';
import Description from "./sheet-description.svelte"; import Description from './sheet-description.svelte';
const Portal = SheetPrimitive.Portal; const Portal = SheetPrimitive.Portal;
@ -32,5 +32,5 @@ export {
Header as SheetHeader, Header as SheetHeader,
Footer as SheetFooter, Footer as SheetFooter,
Title as SheetTitle, 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"> <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(); let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
</script> </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', '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', 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: 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: { defaultVariants: {
@ -51,7 +51,7 @@
> >
{@render children?.()} {@render children?.()}
<SheetPrimitive.Close <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" /> <X class="size-4" />
<span class="sr-only">Close</span> <span class="sr-only">Close</span>

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

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

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -14,7 +14,7 @@
<div <div
bind:this={ref} bind:this={ref}
data-slot="sheet-footer" 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} {...restProps}
> >
{@render children?.()} {@render children?.()}

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

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

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Dialog as SheetPrimitive } from "bits-ui"; import { Dialog as SheetPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -15,7 +15,7 @@
bind:ref bind:ref
data-slot="sheet-overlay" data-slot="sheet-overlay"
class={cn( 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 className
)} )}
{...restProps} {...restProps}

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

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

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

@ -1,5 +1,5 @@
<script lang="ts"> <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(); let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
</script> </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 { export {
Root, Root,
// //
Root as Skeleton, Root as Skeleton
}; };

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

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

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

@ -1,11 +1,11 @@
import Root from "./table.svelte"; import Root from './table.svelte';
import Body from "./table-body.svelte"; import Body from './table-body.svelte';
import Caption from "./table-caption.svelte"; import Caption from './table-caption.svelte';
import Cell from "./table-cell.svelte"; import Cell from './table-cell.svelte';
import Footer from "./table-footer.svelte"; import Footer from './table-footer.svelte';
import Head from "./table-head.svelte"; import Head from './table-head.svelte';
import Header from "./table-header.svelte"; import Header from './table-header.svelte';
import Row from "./table-row.svelte"; import Row from './table-row.svelte';
export { export {
Root, Root,
@ -24,5 +24,5 @@ export {
Footer as TableFooter, Footer as TableFooter,
Head as TableHead, Head as TableHead,
Header as TableHeader, 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"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -14,7 +14,7 @@
<tbody <tbody
bind:this={ref} bind:this={ref}
data-slot="table-body" data-slot="table-body"
class={cn("[&_tr:last-child]:border-0", className)} class={cn('[&_tr:last-child]:border-0', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

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

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

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { HTMLTdAttributes } from "svelte/elements"; import type { HTMLTdAttributes } from 'svelte/elements';
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -15,7 +15,7 @@
bind:this={ref} bind:this={ref}
data-slot="table-cell" data-slot="table-cell"
class={cn( 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 className
)} )}
{...restProps} {...restProps}

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -14,7 +14,7 @@
<tfoot <tfoot
bind:this={ref} bind:this={ref}
data-slot="table-footer" 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} {...restProps}
> >
{@render children?.()} {@render children?.()}

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { HTMLThAttributes } from "svelte/elements"; import type { HTMLThAttributes } from 'svelte/elements';
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -15,7 +15,7 @@
bind:this={ref} bind:this={ref}
data-slot="table-head" data-slot="table-head"
class={cn( 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 className
)} )}
{...restProps} {...restProps}

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -14,7 +14,7 @@
<thead <thead
bind:this={ref} bind:this={ref}
data-slot="table-header" 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} {...restProps}
> >
{@render children?.()} {@render children?.()}

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -15,7 +15,7 @@
bind:this={ref} bind:this={ref}
data-slot="table-row" data-slot="table-row"
class={cn( 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 className
)} )}
{...restProps} {...restProps}

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

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

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

@ -1,7 +1,7 @@
import Root from "./tabs.svelte"; import Root from './tabs.svelte';
import Content from "./tabs-content.svelte"; import Content from './tabs-content.svelte';
import List from "./tabs-list.svelte"; import List from './tabs-list.svelte';
import Trigger from "./tabs-trigger.svelte"; import Trigger from './tabs-trigger.svelte';
export { export {
Root, Root,
@ -12,5 +12,5 @@ export {
Root as Tabs, Root as Tabs,
Content as TabsContent, Content as TabsContent,
List as TabsList, 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"> <script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui"; import { Tabs as TabsPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -12,6 +12,6 @@
<TabsPrimitive.Content <TabsPrimitive.Content
bind:ref bind:ref
data-slot="tabs-content" data-slot="tabs-content"
class={cn("flex-1 outline-none", className)} class={cn('flex-1 outline-none', className)}
{...restProps} {...restProps}
/> />

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

@ -1,19 +1,15 @@
<script lang="ts"> <script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui"; import { Tabs as TabsPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
ref = $bindable(null),
class: className,
...restProps
}: TabsPrimitive.ListProps = $props();
</script> </script>
<TabsPrimitive.List <TabsPrimitive.List
bind:ref bind:ref
data-slot="tabs-list" data-slot="tabs-list"
class={cn( 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 className
)} )}
{...restProps} {...restProps}

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui"; import { Tabs as TabsPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
bind:ref bind:ref
data-slot="tabs-trigger" data-slot="tabs-trigger"
class={cn( 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 className
)} )}
{...restProps} {...restProps}

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Tabs as TabsPrimitive } from "bits-ui"; import { Tabs as TabsPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -14,6 +14,6 @@
bind:ref bind:ref
bind:value bind:value
data-slot="tabs" data-slot="tabs"
class={cn("flex flex-col gap-2", className)} class={cn('flex flex-col gap-2', className)}
{...restProps} {...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>( export async function attempt<T, E = Error>(
func: (() => T) | Promise<T>, func: (() => T) | Promise<T>,
handler?: ((error: E) => void) | 'throw', handler?: ((error: E) => void) | 'throw'
): Promise<{ result: T | null, error: E | null }> { ): Promise<{ result: T | null; error: E | null }> {
try { try {
const result = await (func instanceof Promise ? func : Promise.resolve().then(func)) const result = await (func instanceof Promise ? func : Promise.resolve().then(func));
return { result, error: null } return { result, error: null };
} } catch (error) {
catch (error) {
if (handler === 'throw') { if (handler === 'throw') {
throw error throw error;
} }
if (handler) { 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) { 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