a homebrewed DnD campaign based in the Honkai: Star Rail universe
hsr
honkaistarrail
dnd
make props spreading consistent
+28
-42
+2
-2
app/src/lib/ui-components/avatar/AvatarStack.svelte
+2
-2
app/src/lib/ui-components/avatar/AvatarStack.svelte
···
11
11
class: className,
12
12
'data-slot': dataSlot = 'avatar-stack',
13
13
ref = $bindable(null),
14
-
...props
14
+
...restProps
15
15
}: AvatarStackProps = $props()
16
16
17
17
const avatarStackTv = tv({
···
28
28
bind:this={ref}
29
29
data-slot={dataSlot}
30
30
class={cn(avatarStackTv(), className)}
31
-
{...props}
31
+
{...restProps}
32
32
>
33
33
{@render children?.()}
34
34
</div>
+2
-2
app/src/lib/ui-components/text-input/PasswordInput.svelte
+2
-2
app/src/lib/ui-components/text-input/PasswordInput.svelte
···
14
14
autocomplete,
15
15
ref = $bindable(null),
16
16
value = $bindable(''),
17
-
...props
17
+
...restProps
18
18
}: PasswordInputProps = $props()
19
19
let showPassword = $state(false)
20
20
let inputType = $state<'password' | 'text'>('password')
···
43
43
bind:value={value}
44
44
type={inputType}
45
45
autocomplete={autocomplete}
46
-
{...props}
46
+
{...restProps}
47
47
>
48
48
{#snippet after()}
49
49
<button
+2
-2
app/src/lib/ui-components/text-input/TextAreaInput.svelte
+2
-2
app/src/lib/ui-components/text-input/TextAreaInput.svelte
···
18
18
class: className,
19
19
ref = $bindable(null),
20
20
value = $bindable(''),
21
-
...other
21
+
...restProps
22
22
}: TextAreaInputProps = $props()
23
23
24
24
const textAreaTv = tv({
···
50
50
{name}
51
51
{placeholder}
52
52
class={cn(textAreaTv({ resizable }), className)}
53
-
{...other}
53
+
{...restProps}
54
54
>
55
55
</textarea>
+2
-2
app/src/lib/ui-patterns/ability-card/AbilityCard.svelte
+2
-2
app/src/lib/ui-patterns/ability-card/AbilityCard.svelte
···
25
25
import { DescList } from '$ui/desc-list'
26
26
import { Tooltip } from '$ui/tooltip'
27
27
28
-
let { name, desc, mechanic, details, ...other }: AbilityCardProps = $props()
28
+
let { name, desc, mechanic, details, ...restProps }: AbilityCardProps = $props()
29
29
</script>
30
30
31
-
<Card.Root {...other}>
31
+
<Card.Root {...restProps}>
32
32
<Card.Heading>
33
33
{name}
34
34
{#snippet sideContent()}
+2
-2
app/src/lib/ui-patterns/combat-text/CombatText.svelte
+2
-2
app/src/lib/ui-patterns/combat-text/CombatText.svelte
···
7
7
type CombatTextProps = CombatTextRootElement & {
8
8
text: string,
9
9
}
10
-
let { text, ...other }: CombatTextProps = $props()
10
+
let { text, ...restProps }: CombatTextProps = $props()
11
11
const tokens = $derived(tokenize(text))
12
12
</script>
13
13
14
-
<p {...other}>
14
+
<p {...restProps}>
15
15
{#each tokens as token}
16
16
{#if token.kind === 'StringLiteral'}
17
17
{token.value}
+2
-2
app/src/lib/ui-patterns/element/ElementChip.svelte
+2
-2
app/src/lib/ui-patterns/element/ElementChip.svelte
···
11
11
let {
12
12
element,
13
13
style = 'fill',
14
-
...other
14
+
...restProps
15
15
}: ElementChipProps = $props()
16
16
const elementColor = $derived(getElementColor(element))
17
17
const isTextDark = $derived(style === 'fill')
18
18
</script>
19
19
20
20
<Chip
21
-
{...other}
21
+
{...restProps}
22
22
withIcon
23
23
color={elementColor}
24
24
style={style}
+2
-2
app/src/lib/ui-patterns/element/ElementText.svelte
+2
-2
app/src/lib/ui-patterns/element/ElementText.svelte
···
15
15
element,
16
16
dark = false,
17
17
appendText = undefined,
18
-
...props
18
+
...restProps
19
19
}: ElementTextProps = $props()
20
20
21
21
const renderedText = $derived.by(() => {
···
30
30
})
31
31
</script>
32
32
33
-
<Text {...props} color={elementColor}>
33
+
<Text {...restProps} color={elementColor}>
34
34
{renderedText}
35
35
</Text>
+1
-1
app/src/lib/ui-patterns/mechanic/MechanicChip.svelte
+1
-1
app/src/lib/ui-patterns/mechanic/MechanicChip.svelte
···
22
22
outline: { iconColor: 'gold' },
23
23
}
24
24
25
-
let { style, size = 'md', mechanic, ...props }: MechanicChipProps = $props()
25
+
let { style, size = 'md', mechanic, ...restProps }: MechanicChipProps = $props()
26
26
const iconColor = $derived(styleMap[style]['iconColor'])
27
27
const mechanicName = $derived(getMechanicName(mechanic))
28
28
</script>
+1
-1
app/src/routes/CreateMenu.svelte
+1
-1
app/src/routes/CreateMenu.svelte
+3
-4
packages/icons/src/lib/ElementIcon.svelte
+3
-4
packages/icons/src/lib/ElementIcon.svelte
···
1
1
<script lang="ts">
2
2
import type { IconProps } from '@lucide/svelte'
3
3
import type { Element } from '@starlight/types/hsr'
4
-
import { tv } from 'tailwind-variants'
4
+
import { cn, tv } from 'tailwind-variants'
5
5
import { getElementIcon } from './ElementIcon.js'
6
-
import { cn } from './cn.js'
7
6
8
7
const elementIconTv = tv({
9
8
variants: {
···
66
65
element,
67
66
dark = false,
68
67
class: className,
69
-
...other
68
+
...restProps
70
69
}: ElementIconProps = $props()
71
70
let Icon = $derived(getElementIcon(element))
72
71
</script>
73
72
74
73
<Icon
75
-
{...other}
74
+
{...restProps}
76
75
class={cn(elementIconTv({element, dark}), className)}
77
76
size={18}
78
77
/>
+2
-4
packages/icons/src/lib/GoogleIcon.svelte
+2
-4
packages/icons/src/lib/GoogleIcon.svelte
···
7
7
]
8
8
9
9
type GoogleIconProps = IconProps
10
-
let props: GoogleIconProps = $props()
10
+
let restProps: GoogleIconProps = $props()
11
11
</script>
12
12
13
-
<Icon name="google" {...props} iconNode={iconNode}>
14
-
{@render props.children?.()}
15
-
</Icon>
13
+
<Icon name="google" {...restProps} iconNode={iconNode} />
+3
-4
packages/icons/src/lib/MechanicIcon.svelte
+3
-4
packages/icons/src/lib/MechanicIcon.svelte
···
1
1
<script lang="ts">
2
2
import type { IconProps } from '@lucide/svelte'
3
3
import type { Mechanic } from '@starlight/types/hsr'
4
-
import { tv, type VariantProps } from 'tailwind-variants'
4
+
import { cn, tv, type VariantProps } from 'tailwind-variants'
5
5
import { getMechanicIcon } from './MechanicIcon.js'
6
-
import { cn } from './cn.js'
7
6
8
7
const mechanicIconTv = tv({
9
8
base: 'stroke-2',
···
35
34
size = 'md',
36
35
color,
37
36
class: className,
38
-
...other
37
+
...restProps
39
38
}: MechanicIconProps = $props()
40
39
let Icon = $derived(getMechanicIcon(mechanic))
41
40
</script>
42
41
43
42
<Icon
44
-
{...other}
43
+
{...restProps}
45
44
class={cn(mechanicIconTv({color, size}), className)}
46
45
/>
+2
-4
packages/icons/src/lib/UniverseIcon.svelte
+2
-4
packages/icons/src/lib/UniverseIcon.svelte
···
12
12
]
13
13
14
14
type UniverseIconProps = IconProps
15
-
let props: UniverseIconProps = $props()
15
+
let restProps: UniverseIconProps = $props()
16
16
</script>
17
17
18
-
<Icon name="universe" {...props} iconNode={iconNode}>
19
-
{@render props.children?.()}
20
-
</Icon>
18
+
<Icon name="universe" {...restProps} iconNode={iconNode} />
+2
-4
packages/icons/src/lib/WhirlIcon.svelte
+2
-4
packages/icons/src/lib/WhirlIcon.svelte
···
12
12
]
13
13
14
14
type WhirlIconProps = IconProps
15
-
let props: WhirlIconProps = $props()
15
+
let restProps: WhirlIconProps = $props()
16
16
</script>
17
17
18
-
<Icon name="whirl" {...props} iconNode={iconNode}>
19
-
{@render props.children?.()}
20
-
</Icon>
18
+
<Icon name="whirl" {...restProps} iconNode={iconNode} />