a homebrewed DnD campaign based in the Honkai: Star Rail universe
hsr
honkaistarrail
dnd
add shadcn-svelte select component
+505
+20
app/components.json
+20
app/components.json
···
1
+
{
2
+
"$schema": "https://shadcn-svelte.com/schema.json",
3
+
"tailwind": {
4
+
"css": "src/styles/app.css",
5
+
"baseColor": "neutral"
6
+
},
7
+
"aliases": {
8
+
"components": "$lib/components",
9
+
"utils": "$lib/utils",
10
+
"ui": "$lib/components/ui",
11
+
"hooks": "$lib/hooks",
12
+
"lib": "$lib"
13
+
},
14
+
"typescript": true,
15
+
"registry": "https://shadcn-svelte.com/registry",
16
+
"style": "mira",
17
+
"iconLibrary": "hugeicons",
18
+
"menuColor": "default",
19
+
"menuAccent": "subtle"
20
+
}
+1
app/package.json
+1
app/package.json
+11
app/src/lib/ui-form/select/exports.ts
+11
app/src/lib/ui-form/select/exports.ts
···
1
+
export { default as Content } from './select-content.svelte'
2
+
export { default as GroupHeading } from './select-group-heading.svelte'
3
+
export { default as Group } from './select-group.svelte'
4
+
export { default as Item } from './select-item.svelte'
5
+
export { default as Label } from './select-label.svelte'
6
+
export { default as Portal } from './select-portal.svelte'
7
+
export { default as ScrollDownButton } from './select-scroll-down-button.svelte'
8
+
export { default as ScrollUpButton } from './select-scroll-up-button.svelte'
9
+
export { default as Separator } from './select-separator.svelte'
10
+
export { default as Trigger } from './select-trigger.svelte'
11
+
export { default as Root } from './select.svelte'
+1
app/src/lib/ui-form/select/index.ts
+1
app/src/lib/ui-form/select/index.ts
···
1
+
export * as Select from './exports'
+68
app/src/lib/ui-form/select/select-content.svelte
+68
app/src/lib/ui-form/select/select-content.svelte
···
1
+
<script lang="ts">
2
+
import { Select as SelectPrimitive } from 'bits-ui'
3
+
import type { ComponentProps } from 'svelte'
4
+
import { tv } from 'tailwind-variants'
5
+
import SelectPortal from './select-portal.svelte'
6
+
import SelectScrollUpButton from './select-scroll-up-button.svelte'
7
+
import SelectScrollDownButton from './select-scroll-down-button.svelte'
8
+
import { cn } from '$lib/utils.js'
9
+
import type { WithoutChild, WithoutChildrenOrChild } from '$lib/utils.js'
10
+
11
+
type Props = WithoutChild<SelectPrimitive.ContentProps> & {
12
+
portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
13
+
}
14
+
let {
15
+
ref = $bindable(null),
16
+
class: className,
17
+
sideOffset = 4,
18
+
portalProps,
19
+
children,
20
+
preventScroll = true,
21
+
...restProps
22
+
}: Props = $props()
23
+
24
+
const styles = tv({
25
+
slots: {
26
+
content: [
27
+
"bg-popover text-popover-foreground",
28
+
"data-open:animate-in",
29
+
"data-closed:animate-out",
30
+
"data-closed:fade-out-0",
31
+
"data-open:fade-in-0",
32
+
"data-closed:zoom-out-95",
33
+
"data-open:zoom-in-95",
34
+
"data-[side=bottom]:slide-in-from-top-2",
35
+
"data-[side=left]:slide-in-from-right-2",
36
+
"data-[side=right]:slide-in-from-left-2",
37
+
"data-[side=top]:slide-in-from-bottom-2",
38
+
"ring-foreground/10 min-w-32 rounded-lg shadow-md ring-1 duration-100",
39
+
"data-[side=inline-start]:slide-in-from-right-2",
40
+
"data-[side=inline-end]:slide-in-from-left-2",
41
+
"relative isolate z-50 overflow-x-hidden overflow-y-auto",
42
+
],
43
+
viewport: [
44
+
"h-(--bits-select-anchor-height)",
45
+
"w-full scroll-my-1",
46
+
"min-w-(--bits-select-anchor-width)",
47
+
]
48
+
}
49
+
})
50
+
const { content, viewport } = styles()
51
+
</script>
52
+
53
+
<SelectPortal {...portalProps}>
54
+
<SelectPrimitive.Content
55
+
bind:ref
56
+
{sideOffset}
57
+
{preventScroll}
58
+
data-slot="select-content"
59
+
class={cn(content(), className)}
60
+
{...restProps}
61
+
>
62
+
<SelectScrollUpButton />
63
+
<SelectPrimitive.Viewport class={cn(viewport())}>
64
+
{@render children?.()}
65
+
</SelectPrimitive.Viewport>
66
+
<SelectScrollDownButton />
67
+
</SelectPrimitive.Content>
68
+
</SelectPortal>
+22
app/src/lib/ui-form/select/select-group-heading.svelte
+22
app/src/lib/ui-form/select/select-group-heading.svelte
···
1
+
<script lang="ts">
2
+
import { Select as SelectPrimitive } from 'bits-ui'
3
+
import type { ComponentProps } from 'svelte'
4
+
import { cn } from '$lib/utils'
5
+
6
+
type Props = ComponentProps<typeof SelectPrimitive.GroupHeading>
7
+
let {
8
+
ref = $bindable(null),
9
+
class: className,
10
+
children,
11
+
...restProps
12
+
}: Props = $props()
13
+
</script>
14
+
15
+
<SelectPrimitive.GroupHeading
16
+
bind:ref
17
+
data-slot="select-group-heading"
18
+
class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
19
+
{...restProps}
20
+
>
21
+
{@render children?.()}
22
+
</SelectPrimitive.GroupHeading>
+18
app/src/lib/ui-form/select/select-group.svelte
+18
app/src/lib/ui-form/select/select-group.svelte
···
1
+
<script lang="ts">
2
+
import { Select as SelectPrimitive } from 'bits-ui'
3
+
import { cn } from '$lib/utils'
4
+
5
+
type Props = SelectPrimitive.GroupProps
6
+
let {
7
+
ref = $bindable(null),
8
+
class: className,
9
+
...restProps
10
+
}: Props = $props()
11
+
</script>
12
+
13
+
<SelectPrimitive.Group
14
+
bind:ref
15
+
data-slot="select-group"
16
+
class={cn("scroll-my-1 p-1", className)}
17
+
{...restProps}
18
+
/>
+54
app/src/lib/ui-form/select/select-item.svelte
+54
app/src/lib/ui-form/select/select-item.svelte
···
1
+
<script lang="ts">
2
+
import CheckIcon from '@lucide/svelte/icons/check'
3
+
import { Select as SelectPrimitive } from 'bits-ui'
4
+
import { tv } from 'tailwind-variants'
5
+
import { cn, type WithoutChild } from '$lib/utils.js'
6
+
7
+
type Props = WithoutChild<SelectPrimitive.ItemProps>
8
+
let {
9
+
ref = $bindable(null),
10
+
class: className,
11
+
value,
12
+
label,
13
+
children: childrenProp,
14
+
...restProps
15
+
}: Props = $props()
16
+
17
+
const styles = tv({
18
+
base: [
19
+
"focus:bg-accent focus:text-accent-foreground",
20
+
"not-data-[variant=destructive]:focus:**:text-accent-foreground",
21
+
"min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed",
22
+
"[&_svg:not([class*='size-'])]:size-3.5",
23
+
"*:[span]:last:flex *:[span]:last:items-center",
24
+
"*:[span]:last:gap-2",
25
+
"data-highlighted:bg-accent",
26
+
"data-highlighted:text-accent-foreground",
27
+
"focus:text-accent-foreground relative",
28
+
"flex w-full cursor-default items-center outline-hidden select-none",
29
+
"data-disabled:pointer-events-none data-disabled:opacity-50",
30
+
"[&_svg]:pointer-events-none [&_svg]:shrink-0",
31
+
]
32
+
})
33
+
</script>
34
+
35
+
<SelectPrimitive.Item
36
+
bind:ref
37
+
{value}
38
+
data-slot="select-item"
39
+
class={cn(styles(), className)}
40
+
{...restProps}
41
+
>
42
+
{#snippet children({ selected, highlighted })}
43
+
<span class="absolute inset-e-2 flex size-3.5 items-center justify-center">
44
+
{#if selected}
45
+
<CheckIcon strokeWidth={2} class="cn-select-item-indicator-icon" />
46
+
{/if}
47
+
</span>
48
+
{#if childrenProp}
49
+
{@render childrenProp({ selected, highlighted })}
50
+
{:else}
51
+
{label || value}
52
+
{/if}
53
+
{/snippet}
54
+
</SelectPrimitive.Item>
+21
app/src/lib/ui-form/select/select-label.svelte
+21
app/src/lib/ui-form/select/select-label.svelte
···
1
+
<script lang="ts">
2
+
import type { HTMLAttributes } from 'svelte/elements'
3
+
import { cn, type WithElementRef } from '$lib/utils.js'
4
+
5
+
type Props = WithElementRef<HTMLAttributes<HTMLDivElement>>
6
+
let {
7
+
ref = $bindable(null),
8
+
class: className,
9
+
children,
10
+
...restProps
11
+
}: Props = $props();
12
+
</script>
13
+
14
+
<div
15
+
bind:this={ref}
16
+
data-slot="select-label"
17
+
class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
18
+
{...restProps}
19
+
>
20
+
{@render children?.()}
21
+
</div>
+8
app/src/lib/ui-form/select/select-portal.svelte
+8
app/src/lib/ui-form/select/select-portal.svelte
+18
app/src/lib/ui-form/select/select-separator.svelte
+18
app/src/lib/ui-form/select/select-separator.svelte
···
1
+
<script lang="ts">
2
+
import { Separator as SeparatorPrimitive } from 'bits-ui'
3
+
import { cn } from '$lib/utils'
4
+
5
+
type Props = SeparatorPrimitive.RootProps
6
+
let {
7
+
ref = $bindable(null),
8
+
class: className,
9
+
...restProps
10
+
}: Props = $props();
11
+
</script>
12
+
13
+
<SeparatorPrimitive.Root
14
+
bind:ref
15
+
data-slot="select-separator"
16
+
class={cn("bg-border/50 -mx-1 my-1 h-px pointer-events-none", className)}
17
+
{...restProps}
18
+
/>
+56
app/src/lib/ui-form/select/select-trigger.svelte
+56
app/src/lib/ui-form/select/select-trigger.svelte
···
1
+
<script lang="ts">
2
+
import ChevronsDownUpIcon from '@lucide/svelte/icons/chevrons-down-up'
3
+
import { Select as SelectPrimitive } from 'bits-ui'
4
+
import { tv } from 'tailwind-variants'
5
+
import { cn, type WithoutChild } from '$lib/utils'
6
+
7
+
type Props = WithoutChild<SelectPrimitive.TriggerProps> & {
8
+
size?: "sm" | "default";
9
+
}
10
+
let {
11
+
ref = $bindable(null),
12
+
class: className,
13
+
children,
14
+
size = "default",
15
+
...restProps
16
+
}: Props = $props()
17
+
18
+
const styles = tv({
19
+
base: [
20
+
'border-input data-placeholder:text-muted-foreground',
21
+
'bg-input/20 dark:bg-input/30',
22
+
'dark:hover:bg-input/50',
23
+
'focus-visible:border-ring',
24
+
'focus-visible:ring-ring/30',
25
+
'aria-invalid:ring-destructive/20',
26
+
'dark:aria-invalid:ring-destructive/40',
27
+
'aria-invalid:border-destructive',
28
+
'dark:aria-invalid:border-destructive/50',
29
+
'gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors',
30
+
'focus-visible:ring-2 aria-invalid:ring-2',
31
+
'data-[size=default]:h-7',
32
+
'data-[size=sm]:h-6',
33
+
'*:data-[slot=select-value]:flex',
34
+
'*:data-[slot=select-value]:gap-1.5',
35
+
'[&_svg:not([class*=\'size-\'])]:size-3.5',
36
+
'flex w-fit items-center justify-between whitespace-nowrap outline-none',
37
+
'disabled:cursor-not-allowed',
38
+
'disabled:opacity-50',
39
+
'*:data-[slot=select-value]:line-clamp-1',
40
+
'*:data-[slot=select-value]:flex',
41
+
'*:data-[slot=select-value]:items-center',
42
+
'[&_svg]:pointer-events-none [&_svg]:shrink-0',
43
+
]
44
+
})
45
+
</script>
46
+
47
+
<SelectPrimitive.Trigger
48
+
bind:ref
49
+
data-slot="select-trigger"
50
+
data-size={size}
51
+
class={cn(styles(), className)}
52
+
{...restProps}
53
+
>
54
+
{@render children?.()}
55
+
<ChevronsDownUpIcon strokeWidth={2} class="text-muted-foreground size-3.5 pointer-events-none" />
56
+
</SelectPrimitive.Trigger>
+12
app/src/lib/ui-form/select/select.svelte
+12
app/src/lib/ui-form/select/select.svelte
···
1
+
<script lang="ts">
2
+
import { Select as SelectPrimitive } from 'bits-ui'
3
+
4
+
type Props = SelectPrimitive.RootProps
5
+
let {
6
+
open = $bindable(false),
7
+
value = $bindable(),
8
+
...restProps
9
+
}: Props = $props()
10
+
</script>
11
+
12
+
<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />
+7
app/src/lib/utils.ts
+7
app/src/lib/utils.ts
···
19
19
export function cn(...inputs: ClassValue[]) {
20
20
return twMerge(clsx(inputs))
21
21
}
22
+
23
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
24
+
export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T
25
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
26
+
export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T
27
+
export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>
28
+
export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null }
+120
app/src/styles/app.css
+120
app/src/styles/app.css
···
3
3
@import './fonts.css';
4
4
@import './color.css';
5
5
@import './utilities.css';
6
+
@import 'shadcn-svelte/tailwind.css';
6
7
@source './../../node_modules/@starlight/icons';
7
8
8
9
@custom-variant dark (&:is(.dark *));
10
+
11
+
:root {
12
+
--background: oklch(1 0 0);
13
+
--foreground: oklch(0.145 0 0);
14
+
--card: oklch(1 0 0);
15
+
--card-foreground: oklch(0.145 0 0);
16
+
--popover: oklch(1 0 0);
17
+
--popover-foreground: oklch(0.145 0 0);
18
+
--primary: oklch(0.205 0 0);
19
+
--primary-foreground: oklch(0.985 0 0);
20
+
--secondary: oklch(0.97 0 0);
21
+
--secondary-foreground: oklch(0.205 0 0);
22
+
--muted: oklch(0.97 0 0);
23
+
--muted-foreground: oklch(0.556 0 0);
24
+
--accent: oklch(0.97 0 0);
25
+
--accent-foreground: oklch(0.205 0 0);
26
+
--destructive: oklch(0.577 0.245 27.325);
27
+
--border: oklch(0.922 0 0);
28
+
--input: oklch(0.922 0 0);
29
+
--ring: oklch(0.708 0 0);
30
+
--chart-1: oklch(0.87 0 0);
31
+
--chart-2: oklch(0.556 0 0);
32
+
--chart-3: oklch(0.439 0 0);
33
+
--chart-4: oklch(0.371 0 0);
34
+
--chart-5: oklch(0.269 0 0);
35
+
--radius: 0.625rem;
36
+
--sidebar: oklch(0.985 0 0);
37
+
--sidebar-foreground: oklch(0.145 0 0);
38
+
--sidebar-primary: oklch(0.205 0 0);
39
+
--sidebar-primary-foreground: oklch(0.985 0 0);
40
+
--sidebar-accent: oklch(0.97 0 0);
41
+
--sidebar-accent-foreground: oklch(0.205 0 0);
42
+
--sidebar-border: oklch(0.922 0 0);
43
+
--sidebar-ring: oklch(0.708 0 0);
44
+
}
45
+
46
+
.dark {
47
+
--background: oklch(0.145 0 0);
48
+
--foreground: oklch(0.985 0 0);
49
+
--card: oklch(0.205 0 0);
50
+
--card-foreground: oklch(0.985 0 0);
51
+
--popover: oklch(0.205 0 0);
52
+
--popover-foreground: oklch(0.985 0 0);
53
+
--primary: oklch(0.922 0 0);
54
+
--primary-foreground: oklch(0.205 0 0);
55
+
--secondary: oklch(0.269 0 0);
56
+
--secondary-foreground: oklch(0.985 0 0);
57
+
--muted: oklch(0.269 0 0);
58
+
--muted-foreground: oklch(0.708 0 0);
59
+
--accent: oklch(0.269 0 0);
60
+
--accent-foreground: oklch(0.985 0 0);
61
+
--destructive: oklch(0.704 0.191 22.216);
62
+
--border: oklch(1 0 0 / 10%);
63
+
--input: oklch(1 0 0 / 15%);
64
+
--ring: oklch(0.556 0 0);
65
+
--chart-1: oklch(0.87 0 0);
66
+
--chart-2: oklch(0.556 0 0);
67
+
--chart-3: oklch(0.439 0 0);
68
+
--chart-4: oklch(0.371 0 0);
69
+
--chart-5: oklch(0.269 0 0);
70
+
--sidebar: oklch(0.205 0 0);
71
+
--sidebar-foreground: oklch(0.985 0 0);
72
+
--sidebar-primary: oklch(0.488 0.243 264.376);
73
+
--sidebar-primary-foreground: oklch(0.985 0 0);
74
+
--sidebar-accent: oklch(0.269 0 0);
75
+
--sidebar-accent-foreground: oklch(0.985 0 0);
76
+
--sidebar-border: oklch(1 0 0 / 10%);
77
+
--sidebar-ring: oklch(0.556 0 0);
78
+
}
79
+
80
+
@theme inline {
81
+
--color-sidebar-ring: var(--sidebar-ring);
82
+
--color-sidebar-border: var(--sidebar-border);
83
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
84
+
--color-sidebar-accent: var(--sidebar-accent);
85
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
86
+
--color-sidebar-primary: var(--sidebar-primary);
87
+
--color-sidebar-foreground: var(--sidebar-foreground);
88
+
--color-sidebar: var(--sidebar);
89
+
--color-chart-5: var(--chart-5);
90
+
--color-chart-4: var(--chart-4);
91
+
--color-chart-3: var(--chart-3);
92
+
--color-chart-2: var(--chart-2);
93
+
--color-chart-1: var(--chart-1);
94
+
--color-ring: var(--ring);
95
+
--color-input: var(--input);
96
+
--color-border: var(--border);
97
+
--color-destructive: var(--destructive);
98
+
--color-accent-foreground: var(--accent-foreground);
99
+
--color-accent: var(--accent);
100
+
--color-muted-foreground: var(--muted-foreground);
101
+
--color-muted: var(--muted);
102
+
--color-secondary-foreground: var(--secondary-foreground);
103
+
--color-secondary: var(--secondary);
104
+
--color-primary-foreground: var(--primary-foreground);
105
+
--color-primary: var(--primary);
106
+
--color-popover-foreground: var(--popover-foreground);
107
+
--color-popover: var(--popover);
108
+
--color-card-foreground: var(--card-foreground);
109
+
--color-card: var(--card);
110
+
--color-foreground: var(--foreground);
111
+
--color-background: var(--background);
112
+
--radius-sm: calc(var(--radius) * 0.6);
113
+
--radius-md: calc(var(--radius) * 0.8);
114
+
--radius-lg: var(--radius);
115
+
--radius-xl: calc(var(--radius) * 1.4);
116
+
--radius-2xl: calc(var(--radius) * 1.8);
117
+
--radius-3xl: calc(var(--radius) * 2.2);
118
+
--radius-4xl: calc(var(--radius) * 2.6);
119
+
}
120
+
121
+
@layer base {
122
+
* {
123
+
@apply border-border outline-ring/50;
124
+
}
125
+
body {
126
+
@apply bg-background text-foreground;
127
+
}
128
+
}
+26
pnpm-lock.yaml
+26
pnpm-lock.yaml
···
130
130
runed:
131
131
specifier: ^0.37.1
132
132
version: 0.37.1
133
+
shadcn-svelte:
134
+
specifier: ^1.2.7
135
+
version: 1.2.7
133
136
svelte:
134
137
specifier: ^5.55.0
135
138
version: 5.55.0
···
335
338
runed:
336
339
specifier: catalog:svelte
337
340
version: 0.37.1(@sveltejs/kit@2.56.1)(svelte@5.55.0)(zod@4.3.6)
341
+
shadcn-svelte:
342
+
specifier: catalog:svelte
343
+
version: 1.2.7(svelte@5.55.0)
338
344
sveltekit-superforms:
339
345
specifier: catalog:svelte
340
346
version: 2.30.1(@sveltejs/kit@2.56.1)(@types/json-schema@7.0.15)(svelte@5.55.0)(typescript@5.9.3)
···
2871
2877
resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
2872
2878
engines: {node: '>=18'}
2873
2879
2880
+
commander@14.0.3:
2881
+
resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
2882
+
engines: {node: '>=20'}
2883
+
2874
2884
commander@9.5.0:
2875
2885
resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
2876
2886
engines: {node: ^12.20.0 || >=14}
···
4132
4142
set-cookie-parser@3.1.0:
4133
4143
resolution: {integrity: sha512-kjnC1DXBHcxaOaOXBHBeRtltsDG2nUiUni+jP92M9gYdW12rsmx92UsfpH7o5tDRs7I1ZZPSQJQGv3UaRfCiuw==}
4134
4144
4145
+
shadcn-svelte@1.2.7:
4146
+
resolution: {integrity: sha512-mWuQk4H4gtV+J2wJQ7nEPKNnB/v86AALFryZU0SSM7ChHmJJMZ1kH+qIuxYKrXm9vOOOcSWHRsWzPDB71DnjYA==}
4147
+
hasBin: true
4148
+
peerDependencies:
4149
+
svelte: ^5.0.0
4150
+
4135
4151
sharp@0.34.5:
4136
4152
resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
4137
4153
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
···
6776
6792
6777
6793
commander@12.1.0: {}
6778
6794
6795
+
commander@14.0.3: {}
6796
+
6779
6797
commander@9.5.0: {}
6780
6798
6781
6799
confbox@0.1.8: {}
···
7936
7954
semver@7.7.4: {}
7937
7955
7938
7956
set-cookie-parser@3.1.0: {}
7957
+
7958
+
shadcn-svelte@1.2.7(svelte@5.55.0):
7959
+
dependencies:
7960
+
commander: 14.0.3
7961
+
node-fetch-native: 1.6.7
7962
+
postcss: 8.5.8
7963
+
svelte: 5.55.0
7964
+
tailwind-merge: 3.5.0
7939
7965
7940
7966
sharp@0.34.5:
7941
7967
dependencies: