Add new UI components: Card and Checkbox; enhance Input and Button with additional props

app/styles/_variables.scss

@@ -5,5 +5,6 @@ $color-placeholder-text: rgba(255, 255, 255, 0.44);
 $color-border: rgba(255, 255, 255, 0.16);
 $color-button: rgba(255, 255, 255, 0.08);
 $color-button-hover: rgba(255, 255, 255, 0.16);
+$color-attention: #fc8181;
 
 $standard-border-radius: 0.3rem;

app/styles/global.scss

@@ -3,4 +3,5 @@
 html {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
 		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	color: white;
 }

app/ui/Button.vue

@@ -7,6 +7,7 @@ interface ButtonProps {
 	variant?: "default" | "ghost"
 	full?: boolean
 	iconName?: string
+	centerText?: boolean
 }
 
 const props = withDefaults(defineProps<ButtonProps>(), {
@@ -23,7 +24,11 @@ const props = withDefaults(defineProps<ButtonProps>(), {
 		:to="props.to"
 		:class="[
 			`button type-${props.variant}`,
-			{ full: props.full, icon: $slots.icon || props.iconName },
+			{
+				full: props.full,
+				icon: $slots.icon || props.iconName,
+				center: props.centerText,
+			},
 		]"
 	>
 		<span class="icon-wrapper">
@@ -48,6 +53,10 @@ const props = withDefaults(defineProps<ButtonProps>(), {
 .full {
 	width: 100%;
 	text-align: left;
+
+	&.center {
+		justify-content: center;
+	}
 }
 
 .button,

app/ui/Card.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface CardProps {
+	width?: string
+}
+
+const props = defineProps<CardProps>()
+</script>
+
+<template>
+	<article class="card" :style="{ width: props.width }">
+		<slot />
+	</article>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+
+.card {
+	border: 1px solid $color-border;
+	border-radius: $standard-border-radius;
+	padding: 1rem;
+}
+</style>

app/ui/Checkbox.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+interface CheckboxProps {
+	label?: string
+	name?: string
+	required?: boolean
+	full?: boolean
+}
+
+const model = defineModel<boolean>({ default: false })
+
+const emit = defineEmits<{
+	(e: "change", value: boolean): void
+}>()
+
+const props = defineProps<CheckboxProps>()
+</script>
+
+<template>
+	<div class="checkbox-wrapper" :class="{ full: props.full }">
+		<label :for="props.name" class="checkbox-label">
+			<input
+				type="checkbox"
+				:id="props.name"
+				:name="props.name"
+				v-model="model"
+				@change="emit('change', model)"
+				:required="props.required"
+			/>
+			<span class="checkmark"></span>
+
+			<slot v-if="$slots.label" name="label" />
+			<span v-else-if="props.label">{{ props.label }}</span>
+
+			<span v-if="props.required" class="required">*</span>
+		</label>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+@use "@/styles/util" as *;
+
+.checkbox-wrapper {
+	display: inline-block;
+	position: relative;
+	user-select: none;
+
+	&.full {
+		display: block;
+		width: 100%;
+	}
+}
+
+.checkbox-label {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	cursor: pointer;
+	position: relative;
+	padding-left: 1.6rem;
+	@include fontSize(16px);
+}
+
+.checkbox-label input {
+	position: absolute;
+	opacity: 0;
+	cursor: pointer;
+	height: 0;
+	width: 0;
+}
+
+.checkmark {
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	height: 1rem;
+	width: 1rem;
+	border: 1px solid $color-border;
+	border-radius: $standard-border-radius;
+	background-color: transparent;
+	transition: background-color 0.2s, border-color 0.2s;
+}
+
+.checkbox-label input:checked ~ .checkmark {
+	background-color: $color-accent;
+	border-color: $color-accent;
+}
+
+.checkbox-label input:focus-visible ~ .checkmark {
+	outline: 2px solid $color-accent;
+	outline-offset: 2px;
+}
+
+.checkmark::after {
+	content: "";
+	position: absolute;
+	display: none;
+	left: 0.28rem;
+	top: 0.05rem;
+	width: 0.3rem;
+	height: 0.6rem;
+	border: solid white;
+	border-width: 0 2px 2px 0;
+	transform: rotate(45deg);
+}
+
+.checkbox-label input:checked ~ .checkmark::after {
+	display: block;
+}
+
+.required {
+	color: $color-attention;
+	margin-left: 0.3em;
+}
+</style>

app/ui/Input.vue

@@ -1,8 +1,15 @@
 <script setup lang="ts">
+type InputType = HTMLInputElement["type"]
+type AutocompleteType = HTMLInputElement["autocomplete"]
+
 interface InputProps {
 	placeholder?: string
 	full?: boolean
 	iconName?: string
+	type?: InputType
+	name?: string
+	required?: boolean
+	autocomplete?: AutocompleteType
 }
 
 const value = defineModel("value")
@@ -16,6 +23,11 @@ const props = defineProps<InputProps>()
 </script>
 
 <template>
+	<div class="input-wrapper">
+		<label v-if="$slots.label" :for="props.name">
+			<slot name="label" />
+			<span v-if="props.required" class="required">*</span>
+		</label>
 		<div
 			class="input"
 			:class="{ full: props.full, icon: $slots.icon || props.iconName }"
@@ -24,17 +36,38 @@ const props = defineProps<InputProps>()
 				<slot name="icon" v-if="!props.iconName" />
 				<Icon :name="props.iconName" v-else />
 			</span>
+
 			<input
 				:placeholder="props.placeholder"
 				v-model="value"
 				@input="(e) => emit('input', e.target?.value)"
 				@focus="emit('focus')"
+				:type="props.type"
+				:name="props.name"
+				:id="props.name"
+				:required="props.required"
+				:autocomplete="props.autocomplete"
 			/>
 		</div>
+	</div>
 </template>
 
 <style lang="scss" scoped>
 @use "@/styles/variables" as *;
+@use "@/styles/util" as *;
+
+.input-wrapper {
+	& > label {
+		display: block;
+		@include fontSize(14px);
+		margin-bottom: 0.4rem;
+
+		.required {
+			margin-left: 0.3em;
+			color: $color-attention;
+		}
+	}
+}
 
 .input {
 	border-radius: $standard-border-radius;
@@ -52,6 +85,13 @@ const props = defineProps<InputProps>()
 	& input {
 		width: 100%;
 		background: none;
+
+		&:-webkit-autofill,
+		&:-webkit-autofill:hover,
+		&:-webkit-autofill:focus {
+			box-shadow: 0 0 0px 1000px $color-background inset !important;
+			-webkit-text-fill-color: $color-text !important;
+		}
 	}
 
 	& input:focus {