flambeaux/flbxcup
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

euh lots of changes nothing works ahhh

Browse source
This commit is contained in:
unurled 2025-07-14 01:09:42 +02:00
parent 95d8988876
commit 36b937c5b6
Signed by: unurled
GPG key ID: EFC5F5E709B47DDD
246 changed files with 1758 additions and 1443 deletions
Download patch file Download diff file Expand all files Collapse all files

266
.oxlintrc.json
View file

@ -1,135 +1,135 @@
{ {
"$schema": "./node_modules/oxlint/configuration_schema.json", "$schema": "./node_modules/oxlint/configuration_schema.json",
"plugins": ["typescript", "unicorn"], "plugins": ["typescript", "unicorn"],
"categories": { "categories": {
"correctness": "off" "correctness": "off"
}, },
"env": { "env": {
"builtin": true, "builtin": true,
"browser": true, "browser": true,
"commonjs": true, "commonjs": true,
"node": true, "node": true,
"shared-node-browser": true "shared-node-browser": true
}, },
"rules": { "rules": {
"for-direction": "error", "for-direction": "error",
"no-async-promise-executor": "error", "no-async-promise-executor": "error",
"no-case-declarations": "error", "no-case-declarations": "error",
"no-class-assign": "error", "no-class-assign": "error",
"no-compare-neg-zero": "error", "no-compare-neg-zero": "error",
"no-cond-assign": "error", "no-cond-assign": "error",
"no-const-assign": "error", "no-const-assign": "error",
"no-constant-binary-expression": "error", "no-constant-binary-expression": "error",
"no-constant-condition": "error", "no-constant-condition": "error",
"no-control-regex": "error", "no-control-regex": "error",
"no-debugger": "error", "no-debugger": "error",
"no-delete-var": "error", "no-delete-var": "error",
"no-dupe-class-members": "error", "no-dupe-class-members": "error",
"no-dupe-else-if": "error", "no-dupe-else-if": "error",
"no-dupe-keys": "error", "no-dupe-keys": "error",
"no-duplicate-case": "error", "no-duplicate-case": "error",
"no-empty": "error", "no-empty": "error",
"no-empty-character-class": "error", "no-empty-character-class": "error",
"no-empty-pattern": "error", "no-empty-pattern": "error",
"no-empty-static-block": "error", "no-empty-static-block": "error",
"no-ex-assign": "error", "no-ex-assign": "error",
"no-extra-boolean-cast": "error", "no-extra-boolean-cast": "error",
"no-fallthrough": "error", "no-fallthrough": "error",
"no-func-assign": "error", "no-func-assign": "error",
"no-global-assign": "error", "no-global-assign": "error",
"no-import-assign": "error", "no-import-assign": "error",
"no-invalid-regexp": "error", "no-invalid-regexp": "error",
"no-irregular-whitespace": "error", "no-irregular-whitespace": "error",
"no-loss-of-precision": "error", "no-loss-of-precision": "error",
"no-new-native-nonconstructor": "error", "no-new-native-nonconstructor": "error",
"no-nonoctal-decimal-escape": "error", "no-nonoctal-decimal-escape": "error",
"no-obj-calls": "error", "no-obj-calls": "error",
"no-prototype-builtins": "error", "no-prototype-builtins": "error",
"no-redeclare": "error", "no-redeclare": "error",
"no-regex-spaces": "error", "no-regex-spaces": "error",
"no-self-assign": "error", "no-self-assign": "error",
"no-setter-return": "error", "no-setter-return": "error",
"no-shadow-restricted-names": "error", "no-shadow-restricted-names": "error",
"no-sparse-arrays": "error", "no-sparse-arrays": "error",
"no-this-before-super": "error", "no-this-before-super": "error",
"no-unexpected-multiline": "off", "no-unexpected-multiline": "off",
"no-unsafe-finally": "error", "no-unsafe-finally": "error",
"no-unsafe-negation": "error", "no-unsafe-negation": "error",
"no-unsafe-optional-chaining": "error", "no-unsafe-optional-chaining": "error",
"no-unused-labels": "error", "no-unused-labels": "error",
"no-unused-private-class-members": "error", "no-unused-private-class-members": "error",
"no-unused-vars": "error", "no-unused-vars": "error",
"no-useless-backreference": "error", "no-useless-backreference": "error",
"no-useless-catch": "error", "no-useless-catch": "error",
"no-useless-escape": "error", "no-useless-escape": "error",
"no-with": "error", "no-with": "error",
"require-yield": "error", "require-yield": "error",
"use-isnan": "error", "use-isnan": "error",
"valid-typeof": "error", "valid-typeof": "error",
"@typescript-eslint/ban-ts-comment": "error", "@typescript-eslint/ban-ts-comment": "error",
"no-array-constructor": "error", "no-array-constructor": "error",
"@typescript-eslint/no-duplicate-enum-values": "error", "@typescript-eslint/no-duplicate-enum-values": "error",
"@typescript-eslint/no-empty-object-type": "error", "@typescript-eslint/no-empty-object-type": "error",
"@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-extra-non-null-assertion": "error", "@typescript-eslint/no-extra-non-null-assertion": "error",
"@typescript-eslint/no-misused-new": "error", "@typescript-eslint/no-misused-new": "error",
"@typescript-eslint/no-namespace": "error", "@typescript-eslint/no-namespace": "error",
"@typescript-eslint/no-non-null-asserted-optional-chain": "error", "@typescript-eslint/no-non-null-asserted-optional-chain": "error",
"@typescript-eslint/no-require-imports": "error", "@typescript-eslint/no-require-imports": "error",
"@typescript-eslint/no-this-alias": "error", "@typescript-eslint/no-this-alias": "error",
"@typescript-eslint/no-unnecessary-type-constraint": "error", "@typescript-eslint/no-unnecessary-type-constraint": "error",
"@typescript-eslint/no-unsafe-declaration-merging": "error", "@typescript-eslint/no-unsafe-declaration-merging": "error",
"@typescript-eslint/no-unsafe-function-type": "error", "@typescript-eslint/no-unsafe-function-type": "error",
"no-unused-expressions": "error", "no-unused-expressions": "error",
"@typescript-eslint/no-wrapper-object-types": "error", "@typescript-eslint/no-wrapper-object-types": "error",
"@typescript-eslint/prefer-as-const": "error", "@typescript-eslint/prefer-as-const": "error",
"@typescript-eslint/prefer-namespace-keyword": "error", "@typescript-eslint/prefer-namespace-keyword": "error",
"@typescript-eslint/triple-slash-reference": "error", "@typescript-eslint/triple-slash-reference": "error",
"curly": "off", "curly": "off",
"unicorn/empty-brace-spaces": "off", "unicorn/empty-brace-spaces": "off",
"unicorn/no-nested-ternary": "off", "unicorn/no-nested-ternary": "off",
"unicorn/number-literal-case": "off" "unicorn/number-literal-case": "off"
}, },
"globals": { "globals": {
"route": "readonly", "route": "readonly",
"Laravel": "readonly" "Laravel": "readonly"
}, },
"ignorePatterns": [ "ignorePatterns": [
"vendor", "vendor",
"node_modules", "node_modules",
"public", "public",
"bootstrap/ssr", "bootstrap/ssr",
"tailwind.config.js", "tailwind.config.js",
"resources/js/components/ui/*" "resources/js/components/ui/*"
], ],
"overrides": [ "overrides": [
{ {
"files": ["**/*.ts", "**/*.tsx", "**/*.mts", "**/*.cts"], "files": ["**/*.ts", "**/*.tsx", "**/*.mts", "**/*.cts"],
"rules": { "rules": {
"no-class-assign": "off", "no-class-assign": "off",
"no-const-assign": "off", "no-const-assign": "off",
"no-dupe-class-members": "off", "no-dupe-class-members": "off",
"no-dupe-keys": "off", "no-dupe-keys": "off",
"no-func-assign": "off", "no-func-assign": "off",
"no-import-assign": "off", "no-import-assign": "off",
"no-new-native-nonconstructor": "off", "no-new-native-nonconstructor": "off",
"no-obj-calls": "off", "no-obj-calls": "off",
"no-redeclare": "off", "no-redeclare": "off",
"no-setter-return": "off", "no-setter-return": "off",
"no-this-before-super": "off", "no-this-before-super": "off",
"no-unsafe-negation": "off", "no-unsafe-negation": "off",
"no-var": "error", "no-var": "error",
"no-with": "off", "no-with": "off",
"prefer-rest-params": "error", "prefer-rest-params": "error",
"prefer-spread": "error" "prefer-spread": "error"
} }
}, },
{ {
"files": ["*.svelte", "**/*.svelte"], "files": ["*.svelte", "**/*.svelte"],
"rules": { "rules": {
"no-inner-declarations": "off", "no-inner-declarations": "off",
"no-self-assign": "off" "no-self-assign": "off"
} }
} }
] ]
} }

2
docker-compose.yml
View file

@ -3,7 +3,7 @@ services:
image: postgres image: postgres
restart: always restart: always
ports: ports:
- 5432:5432 - 127.0.0.1:1234:5432
environment: environment:
POSTGRES_USER: root POSTGRES_USER: root
POSTGRES_PASSWORD: mysecretpassword POSTGRES_PASSWORD: mysecretpassword

212
src/app.css
View file

@ -1,121 +1,121 @@
@import "tailwindcss"; @import 'tailwindcss';
@import "tw-animate-css"; @import 'tw-animate-css';
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
:root { :root {
--radius: 0.625rem; --radius: 0.625rem;
--background: oklch(1 0 0); --background: oklch(1 0 0);
--foreground: oklch(0.129 0.042 264.695); --foreground: oklch(0.129 0.042 264.695);
--card: oklch(1 0 0); --card: oklch(1 0 0);
--card-foreground: oklch(0.129 0.042 264.695); --card-foreground: oklch(0.129 0.042 264.695);
--popover: oklch(1 0 0); --popover: oklch(1 0 0);
--popover-foreground: oklch(0.129 0.042 264.695); --popover-foreground: oklch(0.129 0.042 264.695);
--primary: oklch(0.208 0.042 265.755); --primary: oklch(0.208 0.042 265.755);
--primary-foreground: oklch(0.984 0.003 247.858); --primary-foreground: oklch(0.984 0.003 247.858);
--secondary: oklch(0.968 0.007 247.896); --secondary: oklch(0.968 0.007 247.896);
--secondary-foreground: oklch(0.208 0.042 265.755); --secondary-foreground: oklch(0.208 0.042 265.755);
--muted: oklch(0.968 0.007 247.896); --muted: oklch(0.968 0.007 247.896);
--muted-foreground: oklch(0.554 0.046 257.417); --muted-foreground: oklch(0.554 0.046 257.417);
--accent: oklch(0.968 0.007 247.896); --accent: oklch(0.968 0.007 247.896);
--accent-foreground: oklch(0.208 0.042 265.755); --accent-foreground: oklch(0.208 0.042 265.755);
--destructive: oklch(0.577 0.245 27.325); --destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.929 0.013 255.508); --border: oklch(0.929 0.013 255.508);
--input: oklch(0.929 0.013 255.508); --input: oklch(0.929 0.013 255.508);
--ring: oklch(0.704 0.04 256.788); --ring: oklch(0.704 0.04 256.788);
--chart-1: oklch(0.646 0.222 41.116); --chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704); --chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392); --chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429); --chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08); --chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.984 0.003 247.858); --sidebar: oklch(0.984 0.003 247.858);
--sidebar-foreground: oklch(0.129 0.042 264.695); --sidebar-foreground: oklch(0.129 0.042 264.695);
--sidebar-primary: oklch(0.208 0.042 265.755); --sidebar-primary: oklch(0.208 0.042 265.755);
--sidebar-primary-foreground: oklch(0.984 0.003 247.858); --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
--sidebar-accent: oklch(0.968 0.007 247.896); --sidebar-accent: oklch(0.968 0.007 247.896);
--sidebar-accent-foreground: oklch(0.208 0.042 265.755); --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
--sidebar-border: oklch(0.929 0.013 255.508); --sidebar-border: oklch(0.929 0.013 255.508);
--sidebar-ring: oklch(0.704 0.04 256.788); --sidebar-ring: oklch(0.704 0.04 256.788);
} }
.dark { .dark {
--background: oklch(0.129 0.042 264.695); --background: oklch(0.129 0.042 264.695);
--foreground: oklch(0.984 0.003 247.858); --foreground: oklch(0.984 0.003 247.858);
--card: oklch(0.208 0.042 265.755); --card: oklch(0.208 0.042 265.755);
--card-foreground: oklch(0.984 0.003 247.858); --card-foreground: oklch(0.984 0.003 247.858);
--popover: oklch(0.208 0.042 265.755); --popover: oklch(0.208 0.042 265.755);
--popover-foreground: oklch(0.984 0.003 247.858); --popover-foreground: oklch(0.984 0.003 247.858);
--primary: oklch(0.929 0.013 255.508); --primary: oklch(0.929 0.013 255.508);
--primary-foreground: oklch(0.208 0.042 265.755); --primary-foreground: oklch(0.208 0.042 265.755);
--secondary: oklch(0.279 0.041 260.031); --secondary: oklch(0.279 0.041 260.031);
--secondary-foreground: oklch(0.984 0.003 247.858); --secondary-foreground: oklch(0.984 0.003 247.858);
--muted: oklch(0.279 0.041 260.031); --muted: oklch(0.279 0.041 260.031);
--muted-foreground: oklch(0.704 0.04 256.788); --muted-foreground: oklch(0.704 0.04 256.788);
--accent: oklch(0.279 0.041 260.031); --accent: oklch(0.279 0.041 260.031);
--accent-foreground: oklch(0.984 0.003 247.858); --accent-foreground: oklch(0.984 0.003 247.858);
--destructive: oklch(0.704 0.191 22.216); --destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%); --border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%); --input: oklch(1 0 0 / 15%);
--ring: oklch(0.551 0.027 264.364); --ring: oklch(0.551 0.027 264.364);
--chart-1: oklch(0.488 0.243 264.376); --chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48); --chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08); --chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9); --chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439); --chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.208 0.042 265.755); --sidebar: oklch(0.208 0.042 265.755);
--sidebar-foreground: oklch(0.984 0.003 247.858); --sidebar-foreground: oklch(0.984 0.003 247.858);
--sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.984 0.003 247.858); --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
--sidebar-accent: oklch(0.279 0.041 260.031); --sidebar-accent: oklch(0.279 0.041 260.031);
--sidebar-accent-foreground: oklch(0.984 0.003 247.858); --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
--sidebar-border: oklch(1 0 0 / 10%); --sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.551 0.027 264.364); --sidebar-ring: oklch(0.551 0.027 264.364);
} }
@theme inline { @theme inline {
--radius-sm: calc(var(--radius) - 4px); --radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px); --radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius); --radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px); --radius-xl: calc(var(--radius) + 4px);
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--color-card: var(--card); --color-card: var(--card);
--color-card-foreground: var(--card-foreground); --color-card-foreground: var(--card-foreground);
--color-popover: var(--popover); --color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground); --color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary); --color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground); --color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary); --color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground); --color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted); --color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground); --color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent); --color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground); --color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive); --color-destructive: var(--destructive);
--color-border: var(--border); --color-border: var(--border);
--color-input: var(--input); --color-input: var(--input);
--color-ring: var(--ring); --color-ring: var(--ring);
--color-chart-1: var(--chart-1); --color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2); --color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3); --color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4); --color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5); --color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar); --color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border); --color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring); --color-sidebar-ring: var(--sidebar-ring);
} }
@layer base { @layer base {
* { * {
@apply border-border outline-ring/50; @apply border-border outline-ring/50;
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
} }

6
src/app.d.ts vendored
View file

@ -3,10 +3,10 @@
declare global { declare global {
namespace App { namespace App {
interface Locals { interface Locals {
user: import('$lib/server/auth').SessionValidationResult['users']; user: import('$lib/server/auth').SessionValidationResult['user'];
session: import('$lib/server/auth').SessionValidationResult['sessions']; session: import('$lib/server/auth').SessionValidationResult['sessions'];
roles: import('$lib/server/db/schema').Role[]; roles: import('$lib/server/db/schema/roles').Role[];
permissions: import('$lib/server/db/schema').Permission[]; permissions: import('$lib/server/db/schema/permissions').Permission[];
} }
} // interface Error {} } // interface Error {}
// interface Locals {} // interface Locals {}

93
src/lib/components/rounds/create-round.svelte
View file

@ -1,36 +1,92 @@
<script lang="ts"> <script lang="ts">
import { FormControl } from '$ui/form'; import Button from '$ui/button/button.svelte';
import FormDescription from '$ui/form/form-description.svelte';
import FormFieldErrors from '$ui/form/form-field-errors.svelte';
import FormField from '$ui/form/form-field.svelte';
import FormLabel from '$ui/form/form-label.svelte';
import RadioGroup from '$ui/radio-group/radio-group.svelte';
import RadioGroupItem from '$ui/radio-group/radio-group-item.svelte';
import { SchedulingMode } from '@/types';
import { cn } from '@/lib/utils';
import Label from '$ui/label/label.svelte';
import Card from '$ui/card/card.svelte';
import CardContent from '$ui/card/card-content.svelte'; import CardContent from '$ui/card/card-content.svelte';
import CardHeader from '$ui/card/card-header.svelte'; import CardHeader from '$ui/card/card-header.svelte';
import Card from '$ui/card/card.svelte';
import Input from '$ui/input/input.svelte';
import Label from '$ui/label/label.svelte';
import RadioGroupItem from '$ui/radio-group/radio-group-item.svelte';
import RadioGroup from '$ui/radio-group/radio-group.svelte';
import type { Round } from '@/lib/server/db/schema/rounds';
import { cn, instanceOf } from '@/lib/utils';
import { SchedulingMode } from '@/types';
import { ArrowRightIcon, CircleQuestionMarkIcon } from 'lucide-svelte';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import Button from '$ui/button/button.svelte'; import { toast } from 'svelte-sonner';
import { ArrowRightIcon } from 'lucide-svelte'; import { Tooltip, TooltipProvider } from '../ui/tooltip';
import TooltipContent from '../ui/tooltip/tooltip-content.svelte';
import TooltipTrigger from '../ui/tooltip/tooltip-trigger.svelte';
let { competitionId }: { competitionId: number } = $props(); let {
competitionId,
rounds = $bindable(),
showAddRound = $bindable(true)
}: { competitionId: string; rounds: Round[]; showAddRound: boolean } = $props();
let schedulingMode: SchedulingMode = $state(SchedulingMode.single); let schedulingMode: SchedulingMode = $state(SchedulingMode.single);
let name = $state('');
let nameInvalid = $state(false);
let nbMatches: number | undefined = $state();
let nbMatchesInvalid = $state(false);
async function submit() { async function submit() {
if (name.length === 0) {
nameInvalid = true;
toast.error('Name is required');
return;
}
if (!nbMatches || nbMatches < 0) {
nbMatchesInvalid = true;
toast.error('Number of matches must be greater than 0');
return;
}
nameInvalid = false;
const response = await fetch(`/api/competitions/${competitionId}`, { const response = await fetch(`/api/competitions/${competitionId}`, {
method: 'POST', method: 'POST',
credentials: 'include', credentials: 'include',
body: JSON.stringify({ scheduling_mode: schedulingMode }) body: JSON.stringify({ scheduling_mode: schedulingMode, name: name, nb_matches: nbMatches })
}); });
console.log("response", response) console.log('response', response);
// update rounds
const data = await response.json();
if (instanceOf<Round>(data, 'id')) {
rounds = [...rounds, data];
showAddRound = false;
} else {
throw new Error('Invalid round');
}
} }
</script> </script>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="grid grid-cols-2 grid-rows-2 gap-4">
<Label for="name" class="text-start">Name<span class="text-red-500">*</span></Label>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Label for="nb_matches" class="text-start"
>Number of matches<span class="text-red-500">*</span><CircleQuestionMarkIcon /></Label
>
</TooltipTrigger>
<TooltipContent>Number of participants at the beginning of the stage.</TooltipContent>
</Tooltip>
</TooltipProvider>
<Input
aria-invalid={nameInvalid}
name="name"
type="text"
bind:value={name}
placeholder="Name"
/>
<Input
aria-invalid={nbMatchesInvalid}
name="nb_matches"
type="number"
bind:value={nbMatches}
placeholder="Number of matches"
/>
</div>
<RadioGroup <RadioGroup
required required
bind:value={() => schedulingMode, (t: SchedulingMode) => {}} bind:value={() => schedulingMode, (t: SchedulingMode) => {}}
@ -38,11 +94,10 @@
> >
{#each Object.values(SchedulingMode) as mode} {#each Object.values(SchedulingMode) as mode}
<button <button
class= class="flex h-full w-full items-center gap-4 rounded-xl"
'flex h-full w-full items-center gap-4 rounded-xl'
onclick={() => (schedulingMode = mode)} onclick={() => (schedulingMode = mode)}
> >
<Card class={cn("w-full", schedulingMode === mode && ' border-green-500')}> <Card class={cn('w-full', schedulingMode === mode && ' border-green-500')}>
<CardHeader class="flex justify-between"> <CardHeader class="flex justify-between">
<Label class="text-start">{$_(mode)}</Label> <Label class="text-start">{$_(mode)}</Label>
</CardHeader> </CardHeader>

28
src/lib/components/rounds/round.svelte
View file

@ -1,7 +1,29 @@
<script lang="ts"> <script lang="ts">
import type { Round } from '@/lib/server/db/schema/rounds'; import Button from '$ui/button/button.svelte';
import CardContent from '$ui/card/card-content.svelte';
import CardFooter from '$ui/card/card-footer.svelte';
import CardHeader from '$ui/card/card-header.svelte';
import Card from '$ui/card/card.svelte';
import type { RoundWithRelations } from '@/lib/server/db/schema/rounds';
import { redirect } from '@sveltejs/kit';
let { round }: { round: Round } = $props(); let { id, round, round_number }: { id: string; round: RoundWithRelations; round_number: number } =
$props();
</script> </script>
{JSON.stringify(round)} <Card id={`round-${id}`}>
<CardHeader>Round {round.name}</CardHeader>
<CardContent>
{#if !round.matches || round.matches.length <= 0}
No matches, add some !
{:else}
Matches :{#each round.matches as match (match.id)}
{JSON.stringify(match)}
{/each}
{/if}
</CardContent>
<CardFooter
><Button href={`/competitions/${round.competition_id}/rounds/${round.id}`}>View Matches</Button
></CardFooter
>
</Card>

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { buttonVariants } from "$lib/components/ui/button/index.js"; import { buttonVariants } from '$lib/components/ui/button/index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { buttonVariants } from "$lib/components/ui/button/index.js"; import { buttonVariants } from '$lib/components/ui/button/index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,6 +13,6 @@
<AlertDialogPrimitive.Cancel <AlertDialogPrimitive.Cancel
bind:ref bind:ref
data-slot="alert-dialog-cancel" data-slot="alert-dialog-cancel"
class={cn(buttonVariants({ variant: "outline" }), className)} class={cn(buttonVariants({ variant: 'outline' }), className)}
{...restProps} {...restProps}
/> />

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import AlertDialogOverlay from "./alert-dialog-overlay.svelte"; import AlertDialogOverlay from './alert-dialog-overlay.svelte';
import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js"; import { cn, type WithoutChild, type WithoutChildrenOrChild } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -19,7 +19,7 @@
bind:ref bind:ref
data-slot="alert-dialog-content" data-slot="alert-dialog-content"
class={cn( class={cn(
"bg-background 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 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", 'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
className className
)} )}
{...restProps} {...restProps}

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

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

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

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

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<div <div
bind:this={ref} bind:this={ref}
data-slot="alert-dialog-header" data-slot="alert-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
src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
bind:ref bind:ref
data-slot="alert-dialog-overlay" data-slot="alert-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
src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
View file

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

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

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

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

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

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -14,7 +14,7 @@
bind:this={ref} bind:this={ref}
data-slot="alert-description" data-slot="alert-description"
class={cn( class={cn(
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", 'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
className className
)} )}
{...restProps} {...restProps}

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<div <div
bind:this={ref} bind:this={ref}
data-slot="alert-title" data-slot="alert-title"
class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)} class={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

22
src/lib/components/ui/alert/alert.svelte
View file

@ -1,31 +1,31 @@
<script lang="ts" module> <script lang="ts" module>
import { type VariantProps, tv } from "tailwind-variants"; import { type VariantProps, tv } from 'tailwind-variants';
export const alertVariants = tv({ export const alertVariants = tv({
base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", base: 'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
variants: { variants: {
variant: { variant: {
default: "bg-card text-card-foreground", default: 'bg-card text-card-foreground',
destructive: destructive:
"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current", 'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current'
}, }
}, },
defaultVariants: { defaultVariants: {
variant: "default", variant: 'default'
}, }
}); });
export type AlertVariant = VariantProps<typeof alertVariants>["variant"]; export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
</script> </script>
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
variant = "default", variant = 'default',
children, children,
...restProps ...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {

10
src/lib/components/ui/alert/index.ts
View file

@ -1,7 +1,7 @@
import Root from "./alert.svelte"; import Root from './alert.svelte';
import Description from "./alert-description.svelte"; import Description from './alert-description.svelte';
import Title from "./alert-title.svelte"; import Title from './alert-title.svelte';
export { alertVariants, type AlertVariant } from "./alert.svelte"; export { alertVariants, type AlertVariant } from './alert.svelte';
export { export {
Root, Root,
@ -10,5 +10,5 @@ export {
// //
Root as Alert, Root as Alert,
Description as AlertDescription, Description as AlertDescription,
Title as AlertTitle, Title as AlertTitle
}; };

6
src/lib/components/ui/avatar/avatar-fallback.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.Fallback <AvatarPrimitive.Fallback
bind:ref bind:ref
data-slot="avatar-fallback" data-slot="avatar-fallback"
class={cn("bg-muted flex size-full items-center justify-center rounded-full", className)} class={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
{...restProps} {...restProps}
/> />

6
src/lib/components/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}
/> />

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

@ -1,10 +1,10 @@
<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),
loadingStatus = $bindable("loading"), loadingStatus = $bindable('loading'),
class: className, class: className,
...restProps ...restProps
}: AvatarPrimitive.RootProps = $props(); }: AvatarPrimitive.RootProps = $props();
@ -14,6 +14,6 @@
bind:ref bind:ref
bind:loadingStatus bind:loadingStatus
data-slot="avatar" data-slot="avatar"
class={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)} class={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
{...restProps} {...restProps}
/> />

8
src/lib/components/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
}; };

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

@ -1,36 +1,35 @@
<script lang="ts" module> <script lang="ts" module>
import { type VariantProps, tv } from "tailwind-variants"; import { type VariantProps, tv } from 'tailwind-variants';
export const badgeVariants = tv({ export const badgeVariants = tv({
base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
variants: { variants: {
variant: { variant: {
default: default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
secondary: secondary:
"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent", 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
destructive: destructive:
"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white", 'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white',
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
}, }
}, },
defaultVariants: { defaultVariants: {
variant: "default", variant: 'default'
}, }
}); });
export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"]; export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
</script> </script>
<script lang="ts"> <script lang="ts">
import type { HTMLAnchorAttributes } from "svelte/elements"; import type { HTMLAnchorAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
href, href,
class: className, class: className,
variant = "default", variant = 'default',
children, children,
...restProps ...restProps
}: WithElementRef<HTMLAnchorAttributes> & { }: WithElementRef<HTMLAnchorAttributes> & {
@ -39,7 +38,7 @@
</script> </script>
<svelte:element <svelte:element
this={href ? "a" : "span"} this={href ? 'a' : 'span'}
bind:this={ref} bind:this={ref}
data-slot="badge" data-slot="badge"
{href} {href}

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

@ -1,2 +1,2 @@
export { default as Badge } from "./badge.svelte"; export { default as Badge } from './badge.svelte';
export { badgeVariants, type BadgeVariant } from "./badge.svelte"; export { badgeVariants, type BadgeVariant } from './badge.svelte';

8
src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
View file

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

6
src/lib/components/ui/breadcrumb/breadcrumb-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 { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<li <li
bind:this={ref} bind:this={ref}
data-slot="breadcrumb-item" data-slot="breadcrumb-item"
class={cn("inline-flex items-center gap-1.5", className)} class={cn('inline-flex items-center gap-1.5', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

12
src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAnchorAttributes } from "svelte/elements"; import type { HTMLAnchorAttributes } from 'svelte/elements';
import type { Snippet } from "svelte"; import type { Snippet } from 'svelte';
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -15,10 +15,10 @@
} = $props(); } = $props();
const attrs = $derived({ const attrs = $derived({
"data-slot": "breadcrumb-link", 'data-slot': 'breadcrumb-link',
class: cn("hover:text-foreground transition-colors", className), class: cn('hover:text-foreground transition-colors', className),
href, href,
...restProps, ...restProps
}); });
</script> </script>

6
src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { HTMLOlAttributes } from "svelte/elements"; import type { HTMLOlAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -14,7 +14,7 @@
bind:this={ref} bind:this={ref}
data-slot="breadcrumb-list" data-slot="breadcrumb-list"
class={cn( class={cn(
"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5", 'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
className className
)} )}
{...restProps} {...restProps}

6
src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -16,7 +16,7 @@
role="link" role="link"
aria-disabled="true" aria-disabled="true"
aria-current="page" aria-current="page"
class={cn("text-foreground font-normal", className)} class={cn('text-foreground font-normal', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

8
src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import ChevronRightIcon from "@lucide/svelte/icons/chevron-right"; import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
import type { HTMLLiAttributes } from "svelte/elements"; import type { HTMLLiAttributes } from 'svelte/elements';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -16,7 +16,7 @@
data-slot="breadcrumb-separator" data-slot="breadcrumb-separator"
role="presentation" role="presentation"
aria-hidden="true" aria-hidden="true"
class={cn("[&>svg]:size-3.5", className)} class={cn('[&>svg]:size-3.5', className)}
{...restProps} {...restProps}
> >
{#if children} {#if children}

4
src/lib/components/ui/breadcrumb/breadcrumb.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "$lib/utils.js"; import type { WithElementRef } from '$lib/utils.js';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
let { let {
ref = $bindable(null), ref = $bindable(null),

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

@ -1,10 +1,10 @@
import Root from "./breadcrumb.svelte"; import Root from './breadcrumb.svelte';
import Ellipsis from "./breadcrumb-ellipsis.svelte"; import Ellipsis from './breadcrumb-ellipsis.svelte';
import Item from "./breadcrumb-item.svelte"; import Item from './breadcrumb-item.svelte';
import Separator from "./breadcrumb-separator.svelte"; import Separator from './breadcrumb-separator.svelte';
import Link from "./breadcrumb-link.svelte"; import Link from './breadcrumb-link.svelte';
import List from "./breadcrumb-list.svelte"; import List from './breadcrumb-list.svelte';
import Page from "./breadcrumb-page.svelte"; import Page from './breadcrumb-page.svelte';
export { export {
Root, Root,
@ -21,5 +21,5 @@ export {
Separator as BreadcrumbSeparator, Separator as BreadcrumbSeparator,
Link as BreadcrumbLink, Link as BreadcrumbLink,
List as BreadcrumbList, List as BreadcrumbList,
Page as BreadcrumbPage, Page as BreadcrumbPage
}; };

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

@ -1,36 +1,36 @@
<script lang="ts" module> <script lang="ts" module>
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements"; import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
import { type VariantProps, tv } from "tailwind-variants"; import { type VariantProps, tv } from 'tailwind-variants';
export const buttonVariants = tv({ export const buttonVariants = tv({
base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
variants: { variants: {
variant: { variant: {
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
destructive: destructive:
"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white", 'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
outline: outline:
"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border", 'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
link: "text-primary underline-offset-4 hover:underline", link: 'text-primary underline-offset-4 hover:underline'
}, },
size: { size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3", default: 'h-9 px-4 py-2 has-[>svg]:px-3',
sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5", sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
lg: "h-10 rounded-md px-6 has-[>svg]:px-4", lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
icon: "size-9", icon: 'size-9'
}, }
}, },
defaultVariants: { defaultVariants: {
variant: "default", variant: 'default',
size: "default", size: 'default'
}, }
}); });
export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"]; export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
export type ButtonSize = VariantProps<typeof buttonVariants>["size"]; export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
export type ButtonProps = WithElementRef<HTMLButtonAttributes> & export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
WithElementRef<HTMLAnchorAttributes> & { WithElementRef<HTMLAnchorAttributes> & {
@ -42,11 +42,11 @@
<script lang="ts"> <script lang="ts">
let { let {
class: className, class: className,
variant = "default", variant = 'default',
size = "default", size = 'default',
ref = $bindable(null), ref = $bindable(null),
href = undefined, href = undefined,
type = "button", type = 'button',
disabled, disabled,
children, children,
...restProps ...restProps
@ -60,7 +60,7 @@
class={cn(buttonVariants({ variant, size }), className)} class={cn(buttonVariants({ variant, size }), className)}
href={disabled ? undefined : href} href={disabled ? undefined : href}
aria-disabled={disabled} aria-disabled={disabled}
role={disabled ? "link" : undefined} role={disabled ? 'link' : undefined}
tabindex={disabled ? -1 : undefined} tabindex={disabled ? -1 : undefined}
{...restProps} {...restProps}
> >

6
src/lib/components/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
}; };

32
src/lib/components/ui/calendar/calendar-caption.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import type { ComponentProps } from "svelte"; import type { ComponentProps } from 'svelte';
import type Calendar from "./calendar.svelte"; import type Calendar from './calendar.svelte';
import CalendarMonthSelect from "./calendar-month-select.svelte"; import CalendarMonthSelect from './calendar-month-select.svelte';
import CalendarYearSelect from "./calendar-year-select.svelte"; import CalendarYearSelect from './calendar-year-select.svelte';
import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date"; import { DateFormatter, getLocalTimeZone, type DateValue } from '@internationalized/date';
let { let {
captionLayout, captionLayout,
@ -14,13 +14,13 @@
month, month,
locale, locale,
placeholder = $bindable(), placeholder = $bindable(),
monthIndex = 0, monthIndex = 0
}: { }: {
captionLayout: ComponentProps<typeof Calendar>["captionLayout"]; captionLayout: ComponentProps<typeof Calendar>['captionLayout'];
months: ComponentProps<typeof CalendarMonthSelect>["months"]; months: ComponentProps<typeof CalendarMonthSelect>['months'];
monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"]; monthFormat: ComponentProps<typeof CalendarMonthSelect>['monthFormat'];
years: ComponentProps<typeof CalendarYearSelect>["years"]; years: ComponentProps<typeof CalendarYearSelect>['years'];
yearFormat: ComponentProps<typeof CalendarYearSelect>["yearFormat"]; yearFormat: ComponentProps<typeof CalendarYearSelect>['yearFormat'];
month: DateValue; month: DateValue;
placeholder: DateValue | undefined; placeholder: DateValue | undefined;
locale: string; locale: string;
@ -29,13 +29,13 @@
function formatYear(date: DateValue) { function formatYear(date: DateValue) {
const dateObj = date.toDate(getLocalTimeZone()); const dateObj = date.toDate(getLocalTimeZone());
if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear()); if (typeof yearFormat === 'function') return yearFormat(dateObj.getFullYear());
return new DateFormatter(locale, { year: yearFormat }).format(dateObj); return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
} }
function formatMonth(date: DateValue) { function formatMonth(date: DateValue) {
const dateObj = date.toDate(getLocalTimeZone()); const dateObj = date.toDate(getLocalTimeZone());
if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1); if (typeof monthFormat === 'function') return monthFormat(dateObj.getMonth() + 1);
return new DateFormatter(locale, { month: monthFormat }).format(dateObj); return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
} }
</script> </script>
@ -58,15 +58,15 @@
<CalendarYearSelect {years} {yearFormat} value={month.year} /> <CalendarYearSelect {years} {yearFormat} value={month.year} />
{/snippet} {/snippet}
{#if captionLayout === "dropdown"} {#if captionLayout === 'dropdown'}
{@render MonthSelect()} {@render MonthSelect()}
{@render YearSelect()} {@render YearSelect()}
{:else if captionLayout === "dropdown-months"} {:else if captionLayout === 'dropdown-months'}
{@render MonthSelect()} {@render MonthSelect()}
{#if placeholder} {#if placeholder}
{formatYear(placeholder)} {formatYear(placeholder)}
{/if} {/if}
{:else if captionLayout === "dropdown-years"} {:else if captionLayout === 'dropdown-years'}
{#if placeholder} {#if placeholder}
{formatMonth(placeholder)} {formatMonth(placeholder)}
{/if} {/if}

6
src/lib/components/ui/calendar/calendar-cell.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui"; import { Calendar as CalendarPrimitive } 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 @@
<CalendarPrimitive.Cell <CalendarPrimitive.Cell
bind:ref bind:ref
class={cn( class={cn(
"size-(--cell-size) relative p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md", 'relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md',
className className
)} )}
{...restProps} {...restProps}

26
src/lib/components/ui/calendar/calendar-day.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { buttonVariants } from "$lib/components/ui/button/index.js"; import { buttonVariants } from '$lib/components/ui/button/index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
import { Calendar as CalendarPrimitive } from "bits-ui"; import { Calendar as CalendarPrimitive } from 'bits-ui';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,22 +13,22 @@
<CalendarPrimitive.Day <CalendarPrimitive.Day
bind:ref bind:ref
class={cn( class={cn(
buttonVariants({ variant: "ghost" }), buttonVariants({ variant: 'ghost' }),
"size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-normal leading-none", 'flex size-(--cell-size) flex-col items-center justify-center gap-1 p-0 leading-none font-normal whitespace-nowrap select-none',
"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground", '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground',
"data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-foreground", 'data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-foreground',
// Outside months // Outside months
"[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground", '[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground',
// Disabled // Disabled
"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", 'data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
// Unavailable // Unavailable
"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through", 'data-[unavailable]:text-muted-foreground data-[unavailable]:line-through',
// hover // hover
"dark:hover:text-accent-foreground", 'dark:hover:text-accent-foreground',
// focus // focus
"focus:border-ring focus:ring-ring/50 focus:relative", 'focus:border-ring focus:ring-ring/50 focus:relative',
// inner spans // inner spans
"[&>span]:text-xs [&>span]:opacity-70", '[&>span]:text-xs [&>span]:opacity-70',
className className
)} )}
{...restProps} {...restProps}

4
src/lib/components/ui/calendar/calendar-grid-body.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui"; import { Calendar as CalendarPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),

4
src/lib/components/ui/calendar/calendar-grid-head.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui"; import { Calendar as CalendarPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),

6
src/lib/components/ui/calendar/calendar-grid-row.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui"; import { Calendar as CalendarPrimitive } 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 @@
}: CalendarPrimitive.GridRowProps = $props(); }: CalendarPrimitive.GridRowProps = $props();
</script> </script>
<CalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} /> <CalendarPrimitive.GridRow bind:ref class={cn('flex', className)} {...restProps} />

6
src/lib/components/ui/calendar/calendar-grid.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui"; import { Calendar as CalendarPrimitive } 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 @@
<CalendarPrimitive.Grid <CalendarPrimitive.Grid
bind:ref bind:ref
class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)} class={cn('mt-4 flex w-full border-collapse flex-col gap-1', className)}
{...restProps} {...restProps}
/> />

6
src/lib/components/ui/calendar/calendar-head-cell.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui"; import { Calendar as CalendarPrimitive } 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 @@
<CalendarPrimitive.HeadCell <CalendarPrimitive.HeadCell
bind:ref bind:ref
class={cn( class={cn(
"text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal", 'text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal',
className className
)} )}
{...restProps} {...restProps}

6
src/lib/components/ui/calendar/calendar-header.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui"; import { Calendar as CalendarPrimitive } 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 @@
<CalendarPrimitive.Header <CalendarPrimitive.Header
bind:ref bind:ref
class={cn( class={cn(
"h-(--cell-size) flex w-full items-center justify-center gap-1.5 text-sm font-medium", 'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
className className
)} )}
{...restProps} {...restProps}

6
src/lib/components/ui/calendar/calendar-heading.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui"; import { Calendar as CalendarPrimitive } 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 @@
<CalendarPrimitive.Heading <CalendarPrimitive.Heading
bind:ref bind:ref
class={cn("px-(--cell-size) text-sm font-medium", className)} class={cn('px-(--cell-size) text-sm font-medium', className)}
{...restProps} {...restProps}
/> />

10
src/lib/components/ui/calendar/calendar-month-select.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui"; import { Calendar as CalendarPrimitive } from 'bits-ui';
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js"; import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
import ChevronDownIcon from "@lucide/svelte/icons/chevron-down"; import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -14,7 +14,7 @@
<span <span
class={cn( class={cn(
"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border", 'has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]',
className className
)} )}
> >
@ -33,7 +33,7 @@
{/each} {/each}
</select> </select>
<span <span
class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5" class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm font-medium select-none [&>svg]:size-3.5"
aria-hidden="true" aria-hidden="true"
> >
{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label} {monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}

6
src/lib/components/ui/calendar/calendar-month.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { type WithElementRef, cn } from "$lib/utils.js"; import { type WithElementRef, cn } from '$lib/utils.js';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -10,6 +10,6 @@
}: WithElementRef<HTMLAttributes<HTMLElement>> = $props(); }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
</script> </script>
<div {...restProps} bind:this={ref} class={cn("flex flex-col", className)}> <div {...restProps} bind:this={ref} class={cn('flex flex-col', className)}>
{@render children?.()} {@render children?.()}
</div> </div>

6
src/lib/components/ui/calendar/calendar-months.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -12,7 +12,7 @@
<div <div
bind:this={ref} bind:this={ref}
class={cn("relative flex flex-col gap-4 md:flex-row", className)} class={cn('relative flex flex-col gap-4 md:flex-row', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

6
src/lib/components/ui/calendar/calendar-nav.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<nav <nav
{...restProps} {...restProps}
bind:this={ref} bind:this={ref}
class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)} class={cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', className)}
> >
{@render children?.()} {@render children?.()}
</nav> </nav>

12
src/lib/components/ui/calendar/calendar-next-button.svelte
View file

@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui"; import { Calendar as CalendarPrimitive } from 'bits-ui';
import ChevronRightIcon from "@lucide/svelte/icons/chevron-right"; import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js"; import { buttonVariants, type ButtonVariant } from '$lib/components/ui/button/index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
children, children,
variant = "ghost", variant = 'ghost',
...restProps ...restProps
}: CalendarPrimitive.NextButtonProps & { }: CalendarPrimitive.NextButtonProps & {
variant?: ButtonVariant; variant?: ButtonVariant;
@ -23,7 +23,7 @@
bind:ref bind:ref
class={cn( class={cn(
buttonVariants({ variant }), buttonVariants({ variant }),
"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180", 'size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180',
className className
)} )}
children={children || Fallback} children={children || Fallback}

12
src/lib/components/ui/calendar/calendar-prev-button.svelte
View file

@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui"; import { Calendar as CalendarPrimitive } from 'bits-ui';
import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left"; import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js"; import { buttonVariants, type ButtonVariant } from '$lib/components/ui/button/index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
children, children,
variant = "ghost", variant = 'ghost',
...restProps ...restProps
}: CalendarPrimitive.PrevButtonProps & { }: CalendarPrimitive.PrevButtonProps & {
variant?: ButtonVariant; variant?: ButtonVariant;
@ -23,7 +23,7 @@
bind:ref bind:ref
class={cn( class={cn(
buttonVariants({ variant }), buttonVariants({ variant }),
"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180", 'size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180',
className className
)} )}
children={children || Fallback} children={children || Fallback}

10
src/lib/components/ui/calendar/calendar-year-select.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui"; import { Calendar as CalendarPrimitive } from 'bits-ui';
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js"; import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
import ChevronDownIcon from "@lucide/svelte/icons/chevron-down"; import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<span <span
class={cn( class={cn(
"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border", 'has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]',
className className
)} )}
> >
@ -32,7 +32,7 @@
{/each} {/each}
</select> </select>
<span <span
class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5" class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm font-medium select-none [&>svg]:size-3.5"
aria-hidden="true" aria-hidden="true"
> >
{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label} {yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}

40
src/lib/components/ui/calendar/calendar.svelte
View file

@ -1,41 +1,41 @@
<script lang="ts"> <script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui"; import { Calendar as CalendarPrimitive } from 'bits-ui';
import * as Calendar from "./index.js"; import * as Calendar from './index.js';
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js"; import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
import type { ButtonVariant } from "../button/button.svelte"; import type { ButtonVariant } from '../button/button.svelte';
import { isEqualMonth, type DateValue } from "@internationalized/date"; import { isEqualMonth, type DateValue } from '@internationalized/date';
import type { Snippet } from "svelte"; import type { Snippet } from 'svelte';
let { let {
ref = $bindable(null), ref = $bindable(null),
value = $bindable(), value = $bindable(),
placeholder = $bindable(), placeholder = $bindable(),
class: className, class: className,
weekdayFormat = "short", weekdayFormat = 'short',
buttonVariant = "ghost", buttonVariant = 'ghost',
captionLayout = "label", captionLayout = 'label',
locale = "en-US", locale = 'en-US',
months: monthsProp, months: monthsProp,
years, years,
monthFormat: monthFormatProp, monthFormat: monthFormatProp,
yearFormat = "numeric", yearFormat = 'numeric',
day, day,
disableDaysOutsideMonth = false, disableDaysOutsideMonth = false,
...restProps ...restProps
}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & { }: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
buttonVariant?: ButtonVariant; buttonVariant?: ButtonVariant;
captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label"; captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
months?: CalendarPrimitive.MonthSelectProps["months"]; months?: CalendarPrimitive.MonthSelectProps['months'];
years?: CalendarPrimitive.YearSelectProps["years"]; years?: CalendarPrimitive.YearSelectProps['years'];
monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"]; monthFormat?: CalendarPrimitive.MonthSelectProps['monthFormat'];
yearFormat?: CalendarPrimitive.YearSelectProps["yearFormat"]; yearFormat?: CalendarPrimitive.YearSelectProps['yearFormat'];
day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>; day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
} = $props(); } = $props();
const monthFormat = $derived.by(() => { const monthFormat = $derived.by(() => {
if (monthFormatProp) return monthFormatProp; if (monthFormatProp) return monthFormatProp;
if (captionLayout.startsWith("dropdown")) return "short"; if (captionLayout.startsWith('dropdown')) return 'short';
return "long"; return 'long';
}); });
</script> </script>
@ -50,7 +50,7 @@ get along, so we shut typescript up by casting `value` to `never`.
{weekdayFormat} {weekdayFormat}
{disableDaysOutsideMonth} {disableDaysOutsideMonth}
class={cn( class={cn(
"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", 'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
className className
)} )}
{locale} {locale}
@ -97,7 +97,7 @@ get along, so we shut typescript up by casting `value` to `never`.
{#if day} {#if day}
{@render day({ {@render day({
day: date, day: date,
outsideMonth: !isEqualMonth(date, month.value), outsideMonth: !isEqualMonth(date, month.value)
})} })}
{:else} {:else}
<Calendar.Day /> <Calendar.Day />

38
src/lib/components/ui/calendar/index.ts
View file

@ -1,21 +1,21 @@
import Root from "./calendar.svelte"; import Root from './calendar.svelte';
import Cell from "./calendar-cell.svelte"; import Cell from './calendar-cell.svelte';
import Day from "./calendar-day.svelte"; import Day from './calendar-day.svelte';
import Grid from "./calendar-grid.svelte"; import Grid from './calendar-grid.svelte';
import Header from "./calendar-header.svelte"; import Header from './calendar-header.svelte';
import Months from "./calendar-months.svelte"; import Months from './calendar-months.svelte';
import GridRow from "./calendar-grid-row.svelte"; import GridRow from './calendar-grid-row.svelte';
import Heading from "./calendar-heading.svelte"; import Heading from './calendar-heading.svelte';
import GridBody from "./calendar-grid-body.svelte"; import GridBody from './calendar-grid-body.svelte';
import GridHead from "./calendar-grid-head.svelte"; import GridHead from './calendar-grid-head.svelte';
import HeadCell from "./calendar-head-cell.svelte"; import HeadCell from './calendar-head-cell.svelte';
import NextButton from "./calendar-next-button.svelte"; import NextButton from './calendar-next-button.svelte';
import PrevButton from "./calendar-prev-button.svelte"; import PrevButton from './calendar-prev-button.svelte';
import MonthSelect from "./calendar-month-select.svelte"; import MonthSelect from './calendar-month-select.svelte';
import YearSelect from "./calendar-year-select.svelte"; import YearSelect from './calendar-year-select.svelte';
import Month from "./calendar-month.svelte"; import Month from './calendar-month.svelte';
import Nav from "./calendar-nav.svelte"; import Nav from './calendar-nav.svelte';
import Caption from "./calendar-caption.svelte"; import Caption from './calendar-caption.svelte';
export { export {
Day, Day,
@ -36,5 +36,5 @@ export {
MonthSelect, MonthSelect,
Caption, Caption,
// //
Root as Calendar, Root as Calendar
}; };

6
src/lib/components/ui/card/card-action.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<div <div
bind:this={ref} bind:this={ref}
data-slot="card-action" data-slot="card-action"
class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)} class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -10,6 +10,6 @@
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props(); }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script> </script>
<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}> <div bind:this={ref} data-slot="card-content" class={cn('px-6', className)} {...restProps}>
{@render children?.()} {@render children?.()}
</div> </div>

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

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

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<div <div
bind:this={ref} bind:this={ref}
data-slot="card-footer" data-slot="card-footer"
class={cn("[.border-t]:pt-6 flex items-center px-6", className)} class={cn('flex items-center px-6 [.border-t]:pt-6', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -14,7 +14,7 @@
bind:this={ref} bind:this={ref}
data-slot="card-header" data-slot="card-header"
class={cn( class={cn(
"@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6", '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
className className
)} )}
{...restProps} {...restProps}

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<div <div
bind:this={ref} bind:this={ref}
data-slot="card-title" data-slot="card-title"
class={cn("font-semibold leading-none", className)} class={cn('leading-none font-semibold', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -14,7 +14,7 @@
bind:this={ref} bind:this={ref}
data-slot="card" data-slot="card"
class={cn( class={cn(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", 'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
className className
)} )}
{...restProps} {...restProps}

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

@ -1,10 +1,10 @@
import Root from "./card.svelte"; import Root from './card.svelte';
import Content from "./card-content.svelte"; import Content from './card-content.svelte';
import Description from "./card-description.svelte"; import Description from './card-description.svelte';
import Footer from "./card-footer.svelte"; import Footer from './card-footer.svelte';
import Header from "./card-header.svelte"; import Header from './card-header.svelte';
import Title from "./card-title.svelte"; import Title from './card-title.svelte';
import Action from "./card-action.svelte"; import Action from './card-action.svelte';
export { export {
Root, Root,
@ -21,5 +21,5 @@ export {
Footer as CardFooter, Footer as CardFooter,
Header as CardHeader, Header as CardHeader,
Title as CardTitle, Title as CardTitle,
Action as CardAction, Action as CardAction
}; };

18
src/lib/components/ui/command/command-dialog.svelte
View file

@ -1,16 +1,16 @@
<script lang="ts"> <script lang="ts">
import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui"; import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
import type { Snippet } from "svelte"; import type { Snippet } from 'svelte';
import Command from "./command.svelte"; import Command from './command.svelte';
import * as Dialog from "$lib/components/ui/dialog/index.js"; import * as Dialog from '$lib/components/ui/dialog/index.js';
import type { WithoutChildrenOrChild } from "$lib/utils.js"; import type { WithoutChildrenOrChild } from '$lib/utils.js';
let { let {
open = $bindable(false), open = $bindable(false),
ref = $bindable(null), ref = $bindable(null),
value = $bindable(""), value = $bindable(''),
title = "Command Palette", title = 'Command Palette',
description = "Search for a command to run", description = 'Search for a command to run',
portalProps, portalProps,
children, children,
...restProps ...restProps
@ -30,7 +30,7 @@
</Dialog.Header> </Dialog.Header>
<Dialog.Content class="overflow-hidden p-0" {portalProps}> <Dialog.Content class="overflow-hidden p-0" {portalProps}>
<Command <Command
class="**:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5" class="**:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]]:px-2 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
{...restProps} {...restProps}
bind:value bind:value
bind:ref bind:ref

6
src/lib/components/ui/command/command-empty.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Command as CommandPrimitive } from "bits-ui"; import { Command as CommandPrimitive } 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 @@
<CommandPrimitive.Empty <CommandPrimitive.Empty
bind:ref bind:ref
data-slot="command-empty" data-slot="command-empty"
class={cn("py-6 text-center text-sm", className)} class={cn('py-6 text-center text-sm', className)}
{...restProps} {...restProps}
/> />

10
src/lib/components/ui/command/command-group.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Command as CommandPrimitive, useId } from "bits-ui"; import { Command as CommandPrimitive, useId } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -17,14 +17,12 @@
<CommandPrimitive.Group <CommandPrimitive.Group
bind:ref bind:ref
data-slot="command-group" data-slot="command-group"
class={cn("text-foreground overflow-hidden p-1", className)} class={cn('text-foreground overflow-hidden p-1', className)}
value={value ?? heading ?? `----${useId()}`} value={value ?? heading ?? `----${useId()}`}
{...restProps} {...restProps}
> >
{#if heading} {#if heading}
<CommandPrimitive.GroupHeading <CommandPrimitive.GroupHeading class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
>
{heading} {heading}
</CommandPrimitive.GroupHeading> </CommandPrimitive.GroupHeading>
{/if} {/if}

10
src/lib/components/ui/command/command-input.svelte
View file

@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
import { Command as CommandPrimitive } from "bits-ui"; import { Command as CommandPrimitive } from 'bits-ui';
import SearchIcon from "@lucide/svelte/icons/search"; import SearchIcon from '@lucide/svelte/icons/search';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
value = $bindable(""), value = $bindable(''),
...restProps ...restProps
}: CommandPrimitive.InputProps = $props(); }: CommandPrimitive.InputProps = $props();
</script> </script>
@ -16,7 +16,7 @@
<CommandPrimitive.Input <CommandPrimitive.Input
data-slot="command-input" data-slot="command-input"
class={cn( class={cn(
"placeholder:text-muted-foreground outline-hidden flex h-10 w-full rounded-md bg-transparent py-3 text-sm disabled:cursor-not-allowed disabled:opacity-50", 'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
className className
)} )}
bind:ref bind:ref

6
src/lib/components/ui/command/command-item.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Command as CommandPrimitive } from "bits-ui"; import { Command as CommandPrimitive } 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="command-item" data-slot="command-item"
class={cn( class={cn(
"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className className
)} )}
{...restProps} {...restProps}

6
src/lib/components/ui/command/command-link-item.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Command as CommandPrimitive } from "bits-ui"; import { Command as CommandPrimitive } 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="command-item" data-slot="command-item"
class={cn( class={cn(
"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className className
)} )}
{...restProps} {...restProps}

6
src/lib/components/ui/command/command-list.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Command as CommandPrimitive } from "bits-ui"; import { Command as CommandPrimitive } 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 @@
<CommandPrimitive.List <CommandPrimitive.List
bind:ref bind:ref
data-slot="command-list" data-slot="command-list"
class={cn("max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden", className)} class={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
{...restProps} {...restProps}
/> />

6
src/lib/components/ui/command/command-separator.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Command as CommandPrimitive } from "bits-ui"; import { Command as CommandPrimitive } 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 @@
<CommandPrimitive.Separator <CommandPrimitive.Separator
bind:ref bind:ref
data-slot="command-separator" data-slot="command-separator"
class={cn("bg-border -mx-1 h-px", className)} class={cn('bg-border -mx-1 h-px', className)}
{...restProps} {...restProps}
/> />

6
src/lib/components/ui/command/command-shortcut.svelte
View file

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

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

@ -1,10 +1,10 @@
<script lang="ts"> <script lang="ts">
import { Command as CommandPrimitive } from "bits-ui"; import { Command as CommandPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
value = $bindable(""), value = $bindable(''),
class: className, class: className,
...restProps ...restProps
}: CommandPrimitive.RootProps = $props(); }: CommandPrimitive.RootProps = $props();
@ -15,7 +15,7 @@
bind:ref bind:ref
data-slot="command" data-slot="command"
class={cn( class={cn(
"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", 'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
className className
)} )}
{...restProps} {...restProps}

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

@ -1,15 +1,15 @@
import { Command as CommandPrimitive } from "bits-ui"; import { Command as CommandPrimitive } from 'bits-ui';
import Root from "./command.svelte"; import Root from './command.svelte';
import Dialog from "./command-dialog.svelte"; import Dialog from './command-dialog.svelte';
import Empty from "./command-empty.svelte"; import Empty from './command-empty.svelte';
import Group from "./command-group.svelte"; import Group from './command-group.svelte';
import Item from "./command-item.svelte"; import Item from './command-item.svelte';
import Input from "./command-input.svelte"; import Input from './command-input.svelte';
import List from "./command-list.svelte"; import List from './command-list.svelte';
import Separator from "./command-separator.svelte"; import Separator from './command-separator.svelte';
import Shortcut from "./command-shortcut.svelte"; import Shortcut from './command-shortcut.svelte';
import LinkItem from "./command-link-item.svelte"; import LinkItem from './command-link-item.svelte';
const Loading = CommandPrimitive.Loading; const Loading = CommandPrimitive.Loading;
@ -36,5 +36,5 @@ export {
List as CommandList, List as CommandList,
Separator as CommandSeparator, Separator as CommandSeparator,
Shortcut as CommandShortcut, Shortcut as CommandShortcut,
Loading as CommandLoading, Loading as CommandLoading
}; };

2
src/lib/components/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>

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

@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import { Dialog as DialogPrimitive } from "bits-ui"; import { Dialog as DialogPrimitive } from 'bits-ui';
import XIcon from "@lucide/svelte/icons/x"; import XIcon from '@lucide/svelte/icons/x';
import type { Snippet } from "svelte"; import type { Snippet } from 'svelte';
import * as Dialog from "./index.js"; import * as Dialog from './index.js';
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js"; import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -25,7 +25,7 @@
bind:ref bind:ref
data-slot="dialog-content" data-slot="dialog-content"
class={cn( class={cn(
"bg-background 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 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", 'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
className className
)} )}
{...restProps} {...restProps}
@ -33,7 +33,7 @@
{@render children?.()} {@render children?.()}
{#if showCloseButton} {#if showCloseButton}
<DialogPrimitive.Close <DialogPrimitive.Close
class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0" class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
> >
<XIcon /> <XIcon />
<span class="sr-only">Close</span> <span class="sr-only">Close</span>

6
src/lib/components/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}
/> />

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

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

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

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from "$lib/utils.js"; import { cn, type WithElementRef } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,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
src/lib/components/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
src/lib/components/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
src/lib/components/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
src/lib/components/ui/dialog/index.ts
View file

@ -1,13 +1,13 @@
import { Dialog as DialogPrimitive } from "bits-ui"; import { Dialog as DialogPrimitive } from 'bits-ui';
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 Root = DialogPrimitive.Root; const Root = DialogPrimitive.Root;
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
}; };

14
src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
View file

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

6
src/lib/components/ui/dropdown-menu/dropdown-menu-content.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 { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -19,7 +19,7 @@
data-slot="dropdown-menu-content" data-slot="dropdown-menu-content"
{sideOffset} {sideOffset}
class={cn( class={cn(
"bg-popover text-popover-foreground 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 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md", 'bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
className className
)} )}
{...restProps} {...restProps}

8
src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.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 { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
import type { ComponentProps } from "svelte"; import type { ComponentProps } from 'svelte';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -17,6 +17,6 @@
bind:ref bind:ref
data-slot="dropdown-menu-group-heading" data-slot="dropdown-menu-group-heading"
data-inset={inset} data-inset={inset}
class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8", className)} class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8', className)}
{...restProps} {...restProps}
/> />

2
src/lib/components/ui/dropdown-menu/dropdown-menu-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 { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props(); let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
</script> </script>

10
src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
View file

@ -1,16 +1,16 @@
<script lang="ts"> <script lang="ts">
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
inset, inset,
variant = "default", variant = 'default',
...restProps ...restProps
}: DropdownMenuPrimitive.ItemProps & { }: DropdownMenuPrimitive.ItemProps & {
inset?: boolean; inset?: boolean;
variant?: "default" | "destructive"; variant?: 'default' | 'destructive';
} = $props(); } = $props();
</script> </script>
@ -20,7 +20,7 @@
data-inset={inset} data-inset={inset}
data-variant={variant} data-variant={variant}
class={cn( class={cn(
"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className className
)} )}
{...restProps} {...restProps}

6
src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
View file

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

2
src/lib/components/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),

8
src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.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 CircleIcon from "@lucide/svelte/icons/circle"; import CircleIcon from '@lucide/svelte/icons/circle';
import { cn, type WithoutChild } from "$lib/utils.js"; import { cn, type WithoutChild } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -15,7 +15,7 @@
bind:ref bind:ref
data-slot="dropdown-menu-radio-item" data-slot="dropdown-menu-radio-item"
class={cn( class={cn(
"focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className className
)} )}
{...restProps} {...restProps}

6
src/lib/components/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-border -mx-1 my-1 h-px", className)} class={cn('bg-border -mx-1 my-1 h-px', className)}
{...restProps} {...restProps}
/> />

6
src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
View file

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

6
src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.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),
@ -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-popover text-popover-foreground 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-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg", 'bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
className className
)} )}
{...restProps} {...restProps}

8
src/lib/components/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 ChevronRightIcon from "@lucide/svelte/icons/chevron-right"; import ChevronRightIcon 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),
@ -19,7 +19,7 @@
data-slot="dropdown-menu-sub-trigger" data-slot="dropdown-menu-sub-trigger"
data-inset={inset} data-inset={inset}
class={cn( class={cn(
"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className className
)} )}
{...restProps} {...restProps}

2
src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.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 { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props(); let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
</script> </script>

30
src/lib/components/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 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';
import GroupHeading from "./dropdown-menu-group-heading.svelte"; import GroupHeading from './dropdown-menu-group-heading.svelte';
const Sub = DropdownMenuPrimitive.Sub; const Sub = DropdownMenuPrimitive.Sub;
const Root = DropdownMenuPrimitive.Root; const Root = DropdownMenuPrimitive.Root;
@ -45,5 +45,5 @@ export {
Sub, Sub,
SubContent, SubContent,
SubTrigger, SubTrigger,
Trigger, Trigger
}; };

2
src/lib/components/ui/form/form-button.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import * as Button from "$lib/components/ui/button/index.js"; import * as Button from '$lib/components/ui/button/index.js';
let { ref = $bindable(null), ...restProps }: Button.Props = $props(); let { ref = $bindable(null), ...restProps }: Button.Props = $props();
</script> </script>

6
src/lib/components/ui/form/form-description.svelte
View file

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

10
src/lib/components/ui/form/form-element-field.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>"> <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
import * as FormPrimitive from "formsnap"; import * as FormPrimitive from 'formsnap';
import type { FormPathLeaves } from "sveltekit-superforms"; import type { FormPathLeaves } from 'sveltekit-superforms';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js"; import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -17,7 +17,7 @@
<FormPrimitive.ElementField {form} {name}> <FormPrimitive.ElementField {form} {name}>
{#snippet children({ constraints, errors, tainted, value })} {#snippet children({ constraints, errors, tainted, value })}
<div bind:this={ref} class={cn("space-y-2", className)} {...restProps}> <div bind:this={ref} class={cn('space-y-2', className)} {...restProps}>
{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })} {@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
</div> </div>
{/snippet} {/snippet}

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